It brûken fan 'e CSS floeie Eigenskip nei ûntwerp fan webpaginablêden
It CSS-eigenskip is in tige wichtich eigendom foar layout. It soarget jo om jo webstee-ûntwerpen krekt te lizzen as jo wolle dat se sjen wolle - mar om it gebrûk te meitsjen moatte jo begripe hoe't it wurket.
Yn in stylblêd sjocht it CSS float eigendom:
.right {float: right; }
Dit fertelt de blêder dat alles mei de klasse fan "rjochts" moat nei de rjochte wurde.
Jo soe dit sa oanjaan:
class = "right" />
Wat kin jo floeiearje mei de CSS float Eigenskip?
Jo kinne gjin elemint op in webside flokke. Jo kinne allinich blokje-nivo- eleminten slaan. Dit binne de eleminten dy't in blok fan romte opnimme, lykas ôfbyldingen (), paragrafen (), divyzjes (), en list ().
Oare eleminten dy't tekst beynfloedzje, mar gjin skeakel meitsje op 'e side wurde ynline-eleminten neamd en kin net flechte wurde. Dit binne eleminten lykas span (), line breaks (), sterke klam () of kursus ().
Wêr wolle se lizze?
Jo kinne eleminten op 'e rjochter of lofts flokke. Elk elemint dy't it floatd elemint folgje sil oer it floatd elemint oan 'e oare kant rinne.
As ik bygelyks in ôfbylding nei it linken floeie, sil elke tekst of oare eleminten folgje om it rjochts. En as ik in ôfbylding rjochtsje, dan sil elke tekst of oare eleminten folgje om it links hinne. In ôfbylding dat yn in blok fan tekst pleatst wurdt sûnder in floatstyl dat oanwêzich is sil sjen litte lykwols de blêder ynsteld is om ôfbyldings te lêzen.
Dit is normaal mei de earste line fan folgjende tekst werjûn oan 'e boaiem fan' e ôfbylding.
Hoe folle sil se lizze?
In elemint dat flotearre is, sil fierder as links nei rjochts of rjochts fan it container elemint as it kin. Dit soarget in ferskate ferskillende situaasjes ôfhinklik fan hoe jo jo koade skreaun is.
Foar dizze foarbylden sil ik in lyts DIV-elemint oanlizze:
- As it floatde elemint gjin fêste definysje hat, sil it safolle horizontale romte as needsaaklike en beskikber stelle, sûnder de float. Taljochting: guon browsers besykje eleminten te besjen nei floatde eleminten as de breed net definiearre wurdt - meastal it net-flotearre elemint allinich in lyts tal romte jaan. Sa moatte jo altyd in breedte op floatde eleminten definiearje .
- As it container elemint it HTML-elemint is, sil de float DIV op 'e linker marr fan' e side sitte.
- As it kontener elemint sels troch wat oars is, sille de driuwende DIV op 'e linker marr fan it kontener sitte.
- Jo kinne nest floatde eleminten, en dat kin ta de float útoefenje yn in ferrassend plak. Bygelyks dit float is in links float DIV binnen in rjochts float DIV.
- Floare eleminten sille neist elkoar sitte as der romte is yn 'e kontener. Bygelyks dizze kontener hat trije 100px breed DIV-elemint float yn in 400px breed kontener.
Jo kinne sels float brûke om in foto's te meitsjen. Jo sette elke thumbnail (it makket it bêste as se alle deselde grutte binne) yn in DIV mei de titel en de float DIV-eleminten yn 'e kontener.
Hoe lang as it browser finster is, sille de miniatueren in unifoarm lizze.
It Float ôfbrekke
As jo witte hoe't jo in elemint krije om te floeie, is it wichtich om te witten hoe't jo de float ôfslute. Jo drage de float mei it CSS dúdlike eigenskip. Jo kinne loftslagen drukke, rjochtspeilen of beide:
klar: lofts;
klar: rjocht;
klar: beide;
Elk elemint dat jo it dúdlike eigendom foarstelle sille ferskine ûnder in elemint dat flakke dy rjochting. Bygelyks, yn dit foarbyld binne de earste twa paragrafen fan tekst net wiske, mar de tredde is.
Spielje mei de dúdlike wearde fan ferskillende eleminten yn jo dokuminten om ferskillende layout-effekten te krijen.
Ien fan 'e meast nijsgjirrige floatde plakken is in rige fan ôfbyldings ûnder de rjochterkant of lofts kolorje neist de paragrafen fan tekst. Ek as de tekst net lang genôch is nei it skerm scrollen, kinne jo it dúdlik brûke op alle ôfbyldings om derfoar te soargjen dat se yn it kolom ferskine as it neist de eardere ôfbylding.
It HTML (werhelle dit paragraaf):
Duis wachtsje op 'e nij, mar jo kinne net oanmoedigje yn' e haadrol. Keppeling om utens bewurkje seksje edit source
De CSS (om de ôfbyldings nei links te pleatsen):
img.float {float: left;
klar: lofts;
marzje: 5px;
}
En nei rjochts:
img.float {float: right;
klar: rjocht;
marzje: 5px;
}
Floats brûke foar layout
As jo begripe hoe't it float-eigenskip wurket, kinne jo begjinne mei it brûken fan jo websiden. Dit binne de stappen dy't ik nimme om in flotearre webside te meitsjen:
- Untwerp it layout (op papier of yn in grafysk ark of yn myn holle).
- Determine wêr 't de side divyzjes wurde.
- Bestimje de breedtes fan 'e ferskate konteners en de eleminten binnen harren.
- Float alles. Sels it eksterne kontener elemint is flak nei it link, sadat ik wit wêr't it yn 'e relaasje mei de browsere poarte wêze sil.
Lange jo de breedten kenne (persintaazjes fine) fan jo ôfdielingen, kinne jo de float-eigendom brûke om se te plakjen wêr't se op 'e side hearre. En it aardige ding is, jo moatte net sa folle soargen hawwe oer it faksmodel dat ferskil foar Internet Explorer of Firefox.