Paggamit ng CSS float Property sa Pag-disenyo ng Mga Layout ng Web Page
Ang ari-arian ng CSS ay isang napakahalagang ari-arian para sa layout. Pinapayagan ka nitong ilagay ang iyong mga disenyo ng web page nang eksakto kung nais mong ipakita ang mga ito-ngunit upang magamit ito kailangan mong maunawaan kung paano ito gumagana.
Sa isang style sheet, ang CSS float property ay ganito ang hitsura nito:
.right {float: right; }
Sinasabi nito sa browser na ang lahat ng may klase ng "kanan" ay dapat na lumutang sa kanan.
Gusto mong italaga ito tulad nito:
class = "right" />
Ano ang Maaari mong Lumutang sa Property Float ng CSS?
Hindi mo maaaring lumutang ang bawat elemento sa isang web page. Maaari ka lamang lumutang ang mga elemento ng block-level . Ito ang mga elemento na kumukuha ng isang bloke ng puwang sa pahina, tulad ng mga larawan (), mga talata (), dibisyon (), at mga listahan ().
Ang iba pang mga elemento na nakakaapekto sa teksto, ngunit hindi lumikha ng isang kahon sa pahina ay tinatawag na mga elemento ng inline at hindi maaaring floated. Ang mga ito ay mga elemento tulad ng span (), linya ng break (), malakas na diin (), o mga italics ().
Saan Sila Lumulutang?
Maaari kang magpalutang ng mga elemento sa kanan o sa kaliwa. Ang anumang elemento na sumusunod sa floated elemento ay dumadaloy sa paligid ng floated elemento sa kabilang panig.
Halimbawa, kung lumutang ang isang imahe sa kaliwa, ang anumang teksto o iba pang mga elemento na sumusunod dito ay dumadaloy sa paligid nito sa kanan. At kung lumutang ang isang imahe sa kanan, anumang teksto o iba pang mga elemento na sumusunod dito ay dumadaloy sa paligid nito sa kaliwa. Ang isang imahe na inilagay sa isang bloke ng teksto nang walang anumang estilo ng float na inilalapat dito ay ipapakita gayunpaman ang browser ay nakatakda upang magpakita ng mga imahe.
Ito ay karaniwang sa unang linya ng sumusunod na teksto na ipinapakita sa ibaba ng imahe.
Gaano kalayo ang Ilalabas Nila?
Isang elemento na na- floated ay lilipat sa kaliwa o kanan ng elemento ng lalagyan gaya ng makakaya nito. Nagreresulta ito sa iba't ibang sitwasyon depende sa kung paano isinulat ang iyong code.
Para sa mga halimbawang ito, ako ay lumulutang sa isang maliit na elemento ng DIV sa kaliwa:
- Kung ang floated element ay walang pre-natukoy na lapad, ito ay kukuha ng mas maraming puwang na pahalang gaya ng kinakailangan at magagamit, anuman ang float. Tandaan: sinisikap ng ilang browser na maglagay ng mga elemento sa tabi ng mga elemento ng floated kapag ang lapad ay hindi tinukoy-karaniwan ay nagbibigay lamang ng di-floated na elemento lamang ng isang maliit na halaga ng espasyo. Kaya dapat mong laging tukuyin ang isang lapad sa mga floated elemento.
- Kung ang elemento ng lalagyan ay ang elemento ng HTML, ang floated DIV ay umupo sa kaliwang margin ng pahina.
- Kung ang elemento ng lalagyan ay mismo ay nilalaman ng iba pang bagay, ang floated DIV ay umupo sa kaliwang gilid ng lalagyan.
- Maaari mong pugad ang mga elemento na lumutang, at maaaring magresulta sa float na nagtatapos sa isang nakakagulat na lugar. Halimbawa, ang float na ito ay isang kaliwang floated DIV sa loob ng isang karapatan floated DIV.
- Ang mga elemento ng yumuko ay umupo sa tabi ng isa't isa kung may silid sa lalagyan. Halimbawa, ang lalagyan na ito ay may tatlong 100px na malawak na mga elemento ng DIV na lumulutang sa isang malawak na lalagyan na 400px.
Maaari mo ring gamitin ang mga kamay upang lumikha ng isang layout ng gallery ng larawan. Ilagay mo ang bawat thumbnail (ito ay pinakamahusay na gumagana kapag ang mga ito ay ang lahat ng parehong laki) sa isang DIV na may caption at ang float ang DIV elemento sa lalagyan.
Hindi mahalaga kung gaano kalawak ang window ng browser, ang mga thumbnail ay mag-line up nang pantay.
Pag-off ang Float
Kapag alam mo kung paano makakuha ng isang elemento upang lumutang, mahalagang malaman kung paano patayin ang float. Pinapatay mo ang float gamit ang CSS clear property. Maaari mong i-clear ang mga natitirang kamay, tamang mga kamay o pareho:
malinaw: kaliwa;
malinaw: tama;
malinaw: parehong;
Anumang elemento na itinakda mo ang malinaw na ari - arian para sa ay lilitaw sa ibaba ng isang elemento na lumulutang na direksyon. Halimbawa, sa halimbawang ito ang unang dalawang talata ng teksto ay hindi naalis, ngunit ang ikatlo ay.
Maglaro ng malinaw na halaga ng iba't ibang mga elemento sa iyong mga dokumento upang makakuha ng iba't ibang mga epekto sa layout.
Ang isa sa mga pinaka-kawili-wiling floated layout ay isang serye ng mga imahe pababa sa kanan o kaliwang haligi sa tabi ng mga talata ng teksto. Kahit na ang teksto ay hindi sapat na mahaba upang mag-scroll sa nakaraang larawan, maaari mong gamitin ang malinaw sa lahat ng mga larawan upang matiyak na lumilitaw ang mga ito sa haligi sa halip na sa susunod na larawan.
Ang HTML (ulitin ang talata na ito):
Duis aute irure dolor sed the doodle tempor incantidunt in reprehenderit in voluptate. Huwag mag-isip ng isang bagay, upang makagawa ng isang mahusay na mag-aaral.
Ang CSS (upang lumutang ang mga imahe sa kaliwa):
img.float {float: left;
malinaw: kaliwa;
margin: 5px;
}
At sa kanan:
img.float {float: right;
malinaw: tama;
margin: 5px;
}
Paggamit ng mga Float para sa Layout
Sa sandaling naiintindihan mo kung paano gumagana ang float property, maaari mo itong gamitin upang mailagay ang iyong mga web page. Ito ang mga hakbang na ginagawa ko upang lumikha ng isang floated web page:
- Idisenyo ang layout (sa papel o sa isang tool sa graphics o sa aking ulo).
- Tukuyin kung saan pupunta ang mga dibisyon ng pahina.
- Tukuyin ang lapad ng iba't ibang mga lalagyan at ang mga elemento sa loob nito.
- Float everything. Kahit na ang pinakamalawak na elemento ng lalagyan ay lumulutang sa kaliwa upang malaman ko kung saan ito ay may kaugnayan sa port ng view ng browser.
Hangga't alam mo ang mga lapad (ang mga porsyento ay pinong) ng iyong mga seksyon ng layout, maaari mong gamitin ang float property upang ilagay ang mga ito kung saan sila nabibilang sa pahina. At ang ganda ng bagay ay, hindi mo kailangang mag-alala ng mas maraming tungkol sa modelo ng kahon na naiiba para sa Internet Explorer o Firefox.