Korišćenje CSS float-a za dizajniranje veb stranica
CSS svojstvo je vrlo važna svojina za izgled. Omogućava vam da pozicionirate dizajn web stranica tačno onako kako želite da ih prikažete - ali da biste ga koristili, morate razumjeti kako to funkcioniše.
Na listi stilova, osobina CSS float izgleda ovako:
.right {float: desno; }
Ovo govori pretraživaču da sve sa klasi "desno" treba da se kreće udesno.
Ovako bi ste ga dodelili:
class = "right" />
Šta možete plivati sa CSS float Property?
Ne možete da plivate svaki element na web stranici. Možete samo da plutate elemente blok-nivoa . Ovo su elementi koji zauzimaju blok prostora na stranici, kao što su slike (), paragrafi (), podjele () i liste ().
Drugi elementi koji utiču na tekst, ali ne stvaraju okvir na stranici, nazivaju se elementi elementa i ne mogu se plivati. Ovo su elementi kao što su raspon (), prelom linija (), jak naglasak () ili kurziv ().
Gde plivaju?
Možete plutati elemente desno ili levo. Svaki element koji prati plivajući element će teći oko plivajućeg elementa sa druge strane.
Na primjer, ako plutam slikom levo, svaki tekst ili drugi elementi koji prate njega će se kretati oko nje udesno. I ako plutam sliku udesno, svaki tekst ili drugi elementi koji prate to će se kretati oko njega levo. Slika koja je postavljena u blok teksta bez ikakvog plutačkog stila primjenjuje se na njega, međutim, pretraživač je podešen da prikaže slike.
Ovo je obično sa prvom linijom sledećeg teksta prikazanog na dnu slike.
Koliko daleko plivaju?
Element koji je plivao će se pomerati do leve ili desne strane elementa kontejnera onoliko koliko može. Ovo dovodi do nekoliko različitih situacija u zavisnosti od toga kako je vaš kod napisan.
Za ove primere, plivajući mali DIV element lijevo:
- Ako plivajući element nema unapred definisanu širinu, on će zauzeti toliko horizontalnog prostora koliko je potrebno i dostupno, bez obzira na plovak. Napomena: neki pretraživači pokušavaju postaviti elemente pored plivajućih elemenata kada širina nije definirana - obično dajući neplivajućem elementu samo mali prostor. Dakle, uvek treba definirati širinu na plivajućim elementima.
- Ako je element kontejnera HTML element, plivajući DIV će se nalaziti na levoj margini stranice.
- Ako je sam sadržaj kontejnera sakupio nešto drugo, plivajući DIV će sedeti na levoj margini kontejnera.
- Možete gniježiti plutajuće elemente, a to može dovesti do toga da se plovak završi na iznenađujućem mestu. Na primjer, ovo plovilo je lijevo plivajući DIV unutar desne plivajuće DIV-a.
- Plivajući elementi će se sjediti jedni pored drugih ako postoji prostor u kontejneru. Na primjer, ovaj kontejner ima tri DIP elementa širine 100px koji se lebde u kontejneru širine 400px.
Možete i da koristite float da biste kreirali izgled galerije fotografija. Stavite svaku sličicu (najbolje radi kad su iste veličine) u DIV-u sa natpisom i plivaju DIV elemente u kontejneru.
Bez obzira na to koliko je prozor pregledača širok, sličice će se podijeliti ravnomerno.
Isključivanje plovila
Jednom kada znate kako dobiti element koji plutaju, važno je znati kako isključiti plovak. Isključite float pomoću CSS čistog svojstva. Možete da obrišete levo plovilo, desno plovidbe ili oboje:
jasno: lijevo;
jasno: pravo;
jasno: oboje;
Svaki element za koji ste postavili jasno svojstvo će se pojaviti ispod elementa koji se kreće u tom pravcu. Na primer, u ovom primeru prva dva pasusa teksta nisu obrisana, ali treća je.
Igrajte s jasnom vrednošću različitih elemenata u dokumentima kako biste dobili različite efekte rasporeda.
Jedan od najinteresantnijih pločastih rasporeda je serija slika niz desno ili levo stablo pored pasusa teksta. Čak i ako tekst nije dovoljno dugačak za skrolovanje pored slike, možete koristiti brzo na svim slikama da biste bili sigurni da se one pojavljuju u koloni umjesto pored prethodne slike.
HTML (ponovite ovaj pasus):
Duis auta će se vratiti na eiusmod privremenog događaja u ponašanju u voluptate-u. Kupidat je neidentičan, teško i dolje magna alqua.
CSS (za plutanje slika nalevo):
img.float {float: left;
jasno: lijevo;
margin: 5px;
}
A na desno:
img.float {float: desno;
jasno: pravo;
margin: 5px;
}
Korišćenje Floats for Layout
Jednom kada shvatite kako funkcionira float, možete početi da ga koristite kako biste postavili svoje web stranice. Ovo su koraci koje sam napravio da kreiram ploču web stranicu:
- Dizajnirajte izgled (na papiru ili u grafičkom alatu ili u mojoj glavi).
- Odredite gdje će se podeliti stranice.
- Odredite širinu različitih kontejnera i elemente unutar njih.
- Plivati sve. Čak i najslabiji kontejnerski element lebdi se levo, tako da znam gde će biti u odnosu na port pregledača pregledača.
Dokle god znate širine (procenti su dobri) od vaših odlomaka, možete koristiti float svojstvo da ih stavite gdje pripadaju na stranici. I lepo je što ne morate brinuti koliko je model kutije drugačiji za Internet Explorer ili Firefox.