Mampiasa ny CSS float Properties to Design Web Layouts
Ny fananana CSS dia toerana manan-danja iray ho an'ny famolavolana. Izany dia mamela anao hametraka ny tranonkala ao amin'ny tranonkalanao araka izay tianao hampisehoana azy-fa mba hampiasa izany dia tsy maintsy azonao ny fomba fiasany.
Ao amin'ny taratasy fanoratana, ny tranon'ny CSS float dia toy izao:
.right {float: right; }
Izany dia mitatitra amin'ny tranokala fa ny zavatra rehetra miaraka amin'ny kilasin'ny "right" dia tokony hidina eo ankavanana.
Azonao atao ny manendry azy toy izao:
class = "right" />
Inona no azonao atao amin'ny fiparitahan'ny CSS?
Tsy afaka mameno ny singa rehetra ao amin'ny tranonkala iray ianao. Azonao atao ny mamela ireo singa mifandraika amin'ny sakana . Ireo no singa izay manangona toerana iray ao amin'ny pejy, toy ny sary (), fehintsoratra (), fizarana (), ary lisitra ().
Ireo singa hafa izay misy fiantraikany amin'ny lahatsoratra, fa tsy mamorona boaty ao amin'ny pejy dia antsoina hoe inline elements ary tsy azo vakiana. Ireo dia singa toy ny span (), famaky (), fanamafisana (), na kisary ().
Aiza no ipetrahany?
Azonao atao ny mikoriana elatra havanana na havia. Ny elanelana manaraka ny elanelana mirongatra dia hivezivezy manodidina ny elanelan'ny elatra eo an-daniny.
Ohatra, raha mirotsaka an-kavia aho, hisy lahatsoratra na zavatra hafa manaraka azy dia hivezivezy eo ankavanana. Ary raha mitifitra sary iray ankavanana aho, ny lahatsoratra na ny singa hafa manaraka azy dia hitodika miankavia miankavia. Ny sary iray napetraka ao anaty andian-tsoratra tsy misy lozam-pifamoivoizana ampiasaina aminy dia hampiseho fa ny browser kosa dia aseho amin'ny fampisehoana sary.
Ity matetika dia ny andalana voalohany manaraka ny lahatsoratra aseho amin'ny faran'ny sary.
Hatraiza hatraiza no hipoahany?
Ny singa iray izay nilomano dia hivezivezy eo ankavia na havanana amin'ny singa entana toy izay azony. Izany dia miteraka toe-javatra maromaro samihafa arakaraka ny fomba nanoratana ny code.
Ho an'ireto ohatra ireto, dia handefa singa iray kely amin'ny DIV mankany ankavia aho:
- Raha toa ka tsy manana alim-bolana voafaritra ny elanelana misy azy, dia haka toerana malalaka araka izay takiana sy azo alaina izy, na inona na inona fisotro. Fanamarihana: ny sasany amin'ireo navigateur dia manandrana mametraka singa eo anelanelan'ny zavatra mitsonika rehefa tsy voafaritra ny sakany - amin'ny ankapobeny dia manome kely fotsiny ny elanelana tsy voatery. Noho izany dia tokony hamaritra foana ny sakany amin'ny elanelany misesisesy.
- Raha toa ka singa HTML ny singa entona, dia hipetraka eo amin'ny sisiny havia amin'ny pejy ilay DIV float.
- Raha toa ka misy zavatra hafa ny singa entona ao anatiny, dia hipetraka eo amin'ny sisin'ny havokavoka ilay fitifirana DIV.
- Azonao atao ny mibontsina ireo singa mikorontana, ary izany dia mety hiteraka ny lozam-pifamoivoizana any amin'ny toerana mahagaga. Ohatra, io ony io dia ny DIV havia voatsodrano ao anaty DIV.
- Ny elon-drivotra hipetraka eo akaikiny raha misy toerana ao anaty fitoeran-drano. Ohatra, ity container ity dia misy elanelana Diva telo na 100px lavalava nilomano tao anaty container 400px.
Afaka mampiasa sambo mihitsy aza ianao mba hamoronana seho an-tsary. Asehoy ny isam-pamokarana tsirairay (izay tsara indrindra raha izy ireo dia mitovy habe) ao anaty DIV miaraka amin'ilay anarana ary misidina ny singa DIV ao amin'ny container.
Na firy na firy ny varavaran-tranonkalan'ny tranonkala, ny sary vongan-tsary dia mamaritra araka ny tokony ho izy.
Miala amin'ny sambo
Raha vao fantatrao hoe ahoana no ahafahana maka singa iray hivezivezy, dia zava-dehibe ny mahafantatra ny fomba hanakanana ny sidina. Hanafoana ny sidina amin'ny sivilizasiôna CSS ianao. Azonao atao ny manadio ny ravina havia, ny zana-kavoana na ny roa:
mazava: havia;
mazava: mety;
mazava: both;
Ny singa rehetra izay mametraka ny fananana mazava ho anao dia hiseho eo ambany fitaovana iray izay nilomano io torolalana io. Ohatra, amin'ity ohatra ity dia tsy voavaha ny fehintsoratra roa voalohany, fa ny fahatelo kosa.
Miaingo ny sanda mazava amin'ireo singa samihafa ao amin'ny antontan-taratasinao mba hahitana ny fiantraikan'ny layout.
Iray amin'ireo sary maoderina mahaliana indrindra ny andian-tsary eo amin'ny sora-baventy na havia eo akaikin'ny fehintsoratra. Na dia tsy ampy loatra aza ny horonam-boky handikana ny sary, dia azonao ampiasaina mazava tsara amin'ny sary rehetra ny fisehony raha toa ka hita eo amin'ny tsanganana fa tsy manaraka ny sary teo aloha.
Ny HTML (avereno ity andininy ity):
Ny fisainana dia maneho ny tsy fahafahana manatanteraka ny asany amin'ny fanatanterahana ny fahalalaham-pitenenana. Mpifindra-monina tsy misy porofo, miasa sy matanjaka tsara.
Ny CSS (mba hivezivezy amin'ny ankavia):
img.float {float: left;
mazava: ankavia;
sisiny: 5px;
}
Ary miankavanana:
img.float {float: right;
mazava: ankavanana;
sisiny: 5px;
}
Fampiasana sambo ho an'ny drafitra
Raha vao azonao ny fomba fiasan'ny orinasa misoroka, dia azonao atao ny manomboka mampiasa azy mba hamoahana ny pejy Internet anao. Ireto ny dingana nataoko mba hamoronana pejin-tranonkala mirongatra:
- Ampiasao ny layout (amin'ny taratasy na amin'ny fitaovana maoderina na eo amin'ny lohako).
- Tadiavo ny toerana hisy ny fizarana pejy.
- Amboary ny sakan'ny toeram-ponenana samihafa sy ny singa ao anatiny.
- Mipetraha daholo. Na dia ny elanelana misy tahirin-tsakafo ivelany aza dia nidina avy any an-kavia mba hahafantarako ny toerana misy azy eo amin'ny port de navigateur.
Raha mbola fantatrao ny habaka (ampahany tsara dia tsara) amin'ny fizarazarana misy anao, azonao ampiasaina ny sambom-ponenana mba hametrahana azy ireo ny toerana misy azy. Ary ny zavatra mahafinaritra dia, tsy voatery ho sahiran-tsaina loatra ianao momba ny modely misy boaty izay tsy mitovy amin'ny Internet Explorer na Firefox.