Uporaba CSS float Lastnosti za oblikovanje spletnih strani
Lastnost CSS je zelo pomembna lastnost postavitve. Omogoča vam, da vaše spletne strani postavite natanko tako, kot želite, da jih prikažejo, vendar ga morate uporabiti, saj morate razumeti, kako to deluje.
V slogovnem listu je lastnost CSS float:
. prav {float: desno; }
To govori brskalniku, da mora biti vse z razredom »desno« lebdeto v desno.
Dodelili bi jo tako:
razred = "desno" />
Kaj lahko plavate s CSS float Property?
Ne morete plavat vsak element na spletni strani. Lahko le plavate elemente na ravni blokov . To so elementi, ki zavzamejo prostor na strani, na primer slike (), odstavki (), razdelke () in sezname ().
Drugi elementi, ki vplivajo na besedilo, vendar ne ustvarijo polja na strani, se imenujejo inline elementi in jih ne morejo plavati. To so elementi, kot so span (), prelomi vrstic (), močan poudarek () ali poševni ().
Kje plujejo?
Elemente lahko plavate na desno ali levo. Vsak element, ki sledi plavajočemu elementu, teče okoli plavajočega elementa na drugi strani.
Na primer, če plavam sliko na levo, se bo vsako besedilo ali drugi elementi, ki sledijo temu, obračal okrog njega na desno. In če plavam sliko v desno, se bo vsako besedilo ali drugi elementi, ki sledijo temu, preletel po njem na levo. Slika, ki je nameščena v bloku besedila brez plavajočega sloga, se bo prikazala, vendar je brskalnik nastavljen za prikaz slik.
To je ponavadi s prvo vrstico naslednjega besedila, prikazano na dnu slike.
Kako daleč bo plavalo?
Element, ki je bil plavat, se bo premikal tako daleč kot levo ali desno od vsebnikovega elementa. Rezultat tega je več različnih situacij, odvisno od tega, kako je vaša koda zapisana.
Za te primere bom levo pomaknil majhen element DIV:
- Če plavajoči element nima vnaprej določene širine, bo zahteval toliko horizontalnega prostora, kot je zahtevano in na voljo, ne glede na plavajoče. Opomba: nekateri brskalniki poskušajo postaviti elemente poleg plavajočih elementov, če širina ni določena - navadno daje neprekritemu elementu le majhno količino prostora. Torej vedno določite širino na plavajočih elementih.
- Če je element vsebnika element HTML, se plavajoči DIV nahaja na levem robu strani.
- Če vsebnik sam vsebuje nekaj drugega, bo plavajoči DIV sedel na levem robu posode.
- Lahko gnezdite plavajoče elemente, kar lahko povzroči, da se plavajoči konča na presenetljivem mestu. Na primer, ta plavajočo levo je DIV v levem plavajočem prostoru v desno plavajoči DIV.
- Plavajoči elementi bodo sedeli drug poleg drugega, če je v posodi prostor. Na primer, ta vsebnik ima tri širine DIP elementov s širokim razponom velikosti 100 pik v vsebniku širine 400 pik.
Če želite ustvariti postavitev galerije fotografij, lahko uporabite tudi plavate. Vsako sličico vstavite (najbolje deluje, če so vse enake velikosti) v DIV z napisom in plavajte elemente DIV v vsebniku.
Ne glede na to, kako široko je okno brskalnika, bodo sličice enakomerno poravnane.
Izklop plavajočega polja
Ko veste, kako dobiti element, ki ga želite plavati, je pomembno vedeti, kako izklopiti plovec. Plavate izklopite s čisto lastnostjo CSS. Lahko počistite levice, prave plavate ali oboje:
jasno: levo;
jasno: prav;
jasno: oboje;
Vsak element, ki ste ga nastavili za svojo lastnost, bo prikazan pod elementom, ki se giblje v tej smeri. Na primer, v tem primeru se prva dva odstavka besedila ne izbrišeta, tretja pa je.
Igrajte z jasno vrednostjo različnih elementov v dokumentih, da bi dobili drugačne učinke postavitve.
Ena izmed najbolj zanimivih plavajočih postavitev je niz slik po desnem ali levem stolpcu poleg odstavkov besedila. Tudi če besedilo ni dovolj dolgo, da se premikate po sliki, lahko uporabite jasno sliko na vseh slikah, da se prepričate, ali se pojavijo v stolpcu in ne ob prejšnji sliki.
HTML (ponovite ta odstavek):
Duis aute irure dolor sed do eiusmod začasno incididunt v reprehenderit v voluptate. Kupidat je nepropusten, v labore in dolore magna aliqua.
CSS (za plavate slike na levo):
img.float {float: left;
jasno: levo;
margina: 5px;
}
In na desno:
img.float {float: desno;
jasno: prav;
margina: 5px;
}
Uporaba Floats za postavitev
Ko boste razumeli, kako deluje lastnost plovila, jo lahko začnete uporabljati za postavitev svojih spletnih strani. To so koraki, ki jih naredim, da ustvarim plavajočo spletno stran:
- Načrtujte postavitev (na papirju ali v grafičnem orodju ali v moji glavi).
- Ugotovite, kje bodo strani delitve.
- Določite širino različnih posod in elementov v njih.
- Plavaj vse. Tudi najbolj oddaljeni vsebnik je levo, tako da vem, kje bo v zvezi z vrati pogleda brskalnika.
Dokler poznate širine (odstotki so v redu) vaših postavitev, lahko s funkcijo float uporabite, kje so na strani. In prijetna stvar je, da vam ni treba skrbeti toliko, da je model škatle drugačen za Internet Explorer ali Firefox.