Notaðu CSS flotið Eign til að hanna vefsíðu Page Layouts
The CSS eign er mjög mikilvægt eign fyrir skipulag. Það gerir þér kleift að stilla vefsíðuna þína nákvæmlega eins og þú vilt að þau birtist - en til þess að nota það þarftu að skilja hvernig það virkar.
Í stílblaði lítur CSS fljóta eignin á eftirfarandi hátt:
. hægri {fljóta: hægri; }
Þetta segir vafranum að allt með bekknum "rétt" ætti að fljóta til hægri.
Þú myndir úthluta þessu svona:
class = "right" />
Hvað getur þú flotið með CSS flotanum eign?
Þú getur ekki flot hvert frumefni á vefsíðu. Þú getur aðeins flogið blokk stig stigum . Þetta eru þættirnir sem taka upp pláss á síðunni, eins og myndir (), málsgreinar (), deildir () og listar ().
Aðrir þættir sem hafa áhrif á texta, en ekki búa til kassa á síðunni, kallast innsláttarþættir og geta ekki verið fluttar. Þetta eru þættir eins og span (), lína hlé (), sterkur áhersla () eða skáletraður ().
Hvar fljóta þeir?
Þú getur flotið þætti til hægri eða vinstri. Einhver þáttur sem fylgir fljótandi frumefni mun flæða í kringum flotinn á hinni hliðinni.
Til dæmis, ef ég fljóta mynd til vinstri, mun texti eða aðrir þættir sem fylgja henni flæða um það til hægri. Og ef ég fljóta mynd til hægri, mun texti eða aðrir þættir sem fylgja henni flæða um það til vinstri. Mynd sem er sett í textabrot án þess að flotastillt sé beitt á það birtist þó að vafrinn sé stilltur til að sýna myndir.
Þetta er venjulega með fyrstu línu eftirfarandi texta sem birtist neðst á myndinni.
Hversu langt munu þeir fljóta?
Eining sem hefur verið flotið mun hreyfa sig eins langt til vinstri eða hægri í gámseiningunni eins og það getur. Þetta leiðir til nokkurra mismunandi aðstæðna eftir því hvernig kóðinn þinn er skrifaður.
Fyrir þessi dæmi mun ég fljóta lítið DIV atriði til vinstri:
- Ef fljótaþátturinn hefur ekki fyrirfram skilgreindan breidd, tekur það upp eins mikið lárétt pláss eins og þörf er á og tiltæk, óháð floti. Athugaðu: Sumir vöfrar reyna að setja þætti við hliðina á flötum þætti þegar breiddin er ekki skilgreind. Venjulega gefur ekki flotið aðeins smá pláss. Þannig ættir þú alltaf að skilgreina breidd á flötum hlutum.
- Ef gámseiningin er HTML-þátturinn mun fljótandi DIV sitja vinstra megin á síðunni.
- Ef ílátið er sjálft með einhverjum öðrum mun fljótandi DIV sitja á vinstri framhlið ílátsins.
- Þú getur hreiður fljóta þætti, og það getur leitt til þess að flotið endar á óvart stað. Til dæmis, þetta flot er vinstri flotið DIV innan hægri flotts DIV.
- Fljótandi þættir munu sitja við hliðina á hvort öðru ef það er pláss í ílátinu. Til dæmis hefur þetta ílát þrjú 100x breiður DIV þættir fljóta í 400px breiðum ílát.
Þú getur jafnvel notað flotar til að búa til myndasafnið. Þú setur hvert smámyndir (það virkar best þegar þau eru allar í sömu stærð) í DIV með yfirskriftinni og fljóta DIV þættirnar í ílátinu.
Sama hversu mikið vafranum er, smámyndirnar munu samræmast jafnt og þétt.
Slökktu á flotanum
Þegar þú veist hvernig á að fá frumefni til að fljóta, er mikilvægt að vita hvernig á að slökkva á flotanum. Þú slökkva á flotinu með CSS tærum eignum. Þú getur hreinsað vinstri flot, hægri flot eða báðir:
hreinsa: vinstri;
hreinsa: hægri;
hreinsa: bæði;
Einhver þáttur sem þú setur hreinsa eignina fyrir birtist undir þætti sem er flutt í þá átt. Til dæmis, í þessu dæmi eru fyrstu tvær málsgreinar textans ekki hreinsaðar, en þriðji er.
Leika með skýrum gildum mismunandi þætti í skjölunum til að fá mismunandi útlitsáhrif.
Eitt af áhugaverðustu flotum skipulagunum er röð mynda niður til hægri eða vinstri dálk við hliðina á texta. Jafnvel ef textinn er ekki nógu lengi til að fletta yfir myndina, getur þú notað hreinsa á allar myndirnar til að ganga úr skugga um að þær birtast í dálknum frekar en við hliðina á fyrri mynd.
HTML (endurtaktu þessa málsgrein):
Þú ert óeðlilega óhreinn, þú hefur ekki tíma til að tjá þig í fullorðnum. Cupidatat non proident, útbúinn og ólíkur magna aliqua.
The CSS (til að fljóta myndirnar til vinstri):
img.float {float: left;
hreinsa: vinstri;
framlegð: 5px;
}
Og til hægri:
img.float {float: right;
hreinsa: hægri;
framlegð: 5px;
}
Notaðu flot fyrir skipulag
Þegar þú hefur skilið hvernig flot eignin virkar, getur þú byrjað að nota það til að leggja fram vefsíður þínar. Þetta eru skrefin sem ég tek til að búa til flot vefsíðu:
- Hanna útlitið (á pappír eða í grafíkverkfæri eða í höfðinu).
- Ákveða hvar hliðarsviðin verða að vera.
- Ákvarða breidd hinna ýmsu ílátanna og þætti innan þeirra.
- Fljóta allt. Jafnvel ytri ílátið er flotið til vinstri þannig að ég veit hvar það muni vera í tengslum við vafrahliðina.
Svo lengi sem þú þekkir breiddina (hlutfall eru fínn) í útlínusniðunum þínum, getur þú notað flot eignina til að setja þau þar sem þeir tilheyra síðunni. Og það góða er að þú þarft ekki að hafa áhyggjur af því að kassamódelinn sé öðruvísi fyrir Internet Explorer eða Firefox.