Korištenje CSS float svojstva za dizajn izgleda web stranica
CSS svojstvo je vrlo važan svojstvo za izgled. Omogućuje vam da postavite svoje web stranice točno onako kako želite da vam se prikazuju - ali kako biste ih mogli koristiti morate razumjeti kako to funkcionira.
U listi stila CSS float nekretnina izgleda ovako:
pravilno {float: pravo; }
Ovo govori pregledniku da sve s klasom "desno" treba pustiti na desno.
Ovako biste ga dodijelili:
class = "pravo" />
Što možete Float s CSS float svojstvom?
Ne možete plutaju svaki element na web stranici. Možete pluta samo elemente na razini bloka . To su elementi koji zauzimaju blok prostora na stranici, kao što su slike (), stavci (), odjeljci () i popisi ().
Drugi elementi koji utječu na tekst, ali ne stvaraju okvir na stranici nazivaju se inline elementi i ne mogu se plutati. To su elementi kao što su span (), linije pauze (), jaki naglasak () ili kurziv ().
Gdje plutaju?
Možete plutajuće elemente s desne ili lijeve strane. Bilo koji element koji slijedi plutajuće element će protjecati oko plutajućeg elementa s druge strane.
Na primjer, ako plutajući sliku slijeva, svaki tekst ili drugi elementi koji će ga slijediti proći će oko nje desno. A ako plutajući sliku s desne strane, svaki tekst ili drugi elementi koji će ga slijediti proći će oko nje lijevo. Slika koja se nalazi u bloku teksta bez ikakvog plutajućeg stila koja se primjenjuje na njega će se prikazati, međutim, preglednik je postavljen za prikaz slika.
Ovo je obično s prvom retkom sljedećeg teksta prikazanog na dnu slike.
Koliko će daleko plutaju?
Element koji je plutao kretat će se toliko lijevo ili desno od elementa spremnika koliko god može. To rezultira u nekoliko različitih situacija ovisno o tome kako je napisan vaš kôd.
Za ove primjere, ja ću plutati mali DIV element lijevo:
- Ako plutajući element nema unaprijed definiranu širinu, on će zauzeti onoliko horizontalno mjesto koliko je potrebno i dostupno, bez obzira na plovak. Napomena: neki preglednici pokušavaju staviti elemente pokraj elemenata koji se plivaju kada širina nije definirana - obično daju element koji ne pluta samo mali dio prostora. Stoga uvijek trebate odrediti širinu na plutajućim elementima.
- Ako je element spremnika HTML element, plutajuća DIV sjedit će se na lijevoj margini stranice.
- Ako je element spremnika sam po sebi sadržan, plutajuća DIV će sjediti na lijevoj margini spremnika.
- Možete gniježdjevati elemente koji plutaju, a to može dovesti do plutajućeg mjesta na iznenadnom mjestu. Na primjer, ovaj plutač je lijevo plutajuće DIV unutar desnog plutajućeg DIV-a.
- Plutajući elementi će sjediti jedno do drugog ako u spremniku ima mjesta. Na primjer, ovaj spremnik ima tri DIV elementa veličine 100 piksela koji se plutaju u spremniku širokog 400 piksela.
Čak možete koristiti plovake za izradu izgleda foto galerije. Stavite svaku minijaturu (to najbolje funkcionira kada su sve iste veličine) u DIV-u s naslovom i plutaju DIV elemente u spremniku.
Bez obzira koliko je prozor preglednika širok, sličice će se uskladiti ravnomjerno.
Isključivanje Float
Kada znate kako da biste dobili element koji pluta, važno je znati kako isključiti plovak. Isključite plovak pomoću jasnog entiteta CSS-a. Možete očistiti lijeve plovke, plutače ili oboje:
jasno: lijevo;
jasno: pravo;
jasno: oboje;
Bilo koji element koji postavite jasno svojstvo prikazat će se ispod elementa koji je plutao u tom smjeru. Na primjer, u ovom primjeru prva dva odlomka teksta nisu izbrisana, ali treći je.
Igrajte s jasnom vrijednosti različitih elemenata u svojim dokumentima da biste dobili različite izglede izgleda.
Jedan od najzanimljivijih plutajućih izgleda jest niz slika dolje desno ili lijevo pored odlomaka teksta. Čak i ako tekst nije dovoljno dugo da se pomakne iznad slike, možete koristiti jasno na svim slikama kako biste bili sigurni da se pojavljuju u stupcu, a ne pored prethodne slike.
HTML (ponovite ovaj odlomak):
Duis aute irure dolor sed do neusmod tempor incididunt u reprehenderit u voluptate. Cupidatat nije proistekao, utjecao je i pažao.
CSS (za lijepljenje slika lijevo):
img.float {float: lijevo;
jasna: lijevo;
margin: 5px;
}
I desno:
img.float {float: pravo;
jasna: u pravu;
margin: 5px;
}
Upotreba Floata za izgled
Kada shvatite kako funkcija plovila funkcionira, možete ga početi upotrebljavati za postavljanje web stranica. Ovo su koraci koje poduzimam za izradu plutajuće web stranice:
- Izradite raspored (na papiru ili u grafičkom alatu ili u mojoj glavi).
- Odredite gdje će biti podjela stranice.
- Odredite širinu različitih spremnika i elemenata unutar njih.
- Pluta sve. Čak i najudaljeniji element spremnika lebdi lijevo tako da znam gdje će biti u odnosu na port preglednika.
Sve dok znate širine (postotci su u redu) vaših odjeljaka izgleda, možete upotrijebiti plutajuću imovinu kako biste ih stavili na mjesto gdje pripadaju stranici. A lijepo je što ne morate brinuti o tome kako je model kutija različit za Internet Explorer ili Firefox.