Nandritra ny taona maro, ny flows CSS dia efa marefo, nefa ilaina, singa amin'ny famoronana tranokala vohikala. Raha nangataka tsanganana maromaro ianao , dia nitodika tany amin'ny zaridaina . Ny olana amin'ity fomba ity dia, na dia eo aza ny hafanam-po mahavariana izay nasehon'ireo mpamorona tranonkala / mpamorona amin'ny famoronana seho an-tserasera, ny CSS dia tsy tokony hampiasaina amin'izany fomba izany mihitsy.
Raha toa ka azo antoka fa manana toerana eo amin'ny sehatry ny tranokala mandritra ny taona maromaro ho avy ny sambo ary ny CSS dia manome fomba vaovao vaovao hanorenana ny tranokalan'ny tranokalany. Teknolojia vaovao iray hafa izay mampiseho hery be dia be ny CSS Multiple.
Ny Columns CSS dia efa nandritra ny taona vitsy izao, fa ny tsy fahampian'ny fanohanana ao amin'ny tranokala maoderina (haitao taloha amin'ny Internet Explorer) dia nanakana mpampiasa tranonkala maro tsy hampiasa ireo karazana ireo amin'ny asa famokarana.
Amin'ny fiafaran'ny fanohanana ireo dikan-teny taloha ao amin'ny IE, ny sasany amin'ireo mpamorona tranonkala dia manandrana fomba fijery vaovao amin'ny CSS, ny CSS Columns tafiditra ary ny fahitana fa izy ireo dia manana fifehezana bebe kokoa amin'ireo fomba vaovao ireo noho ny nataon'izy ireo tamin'ny flott.
Ny fototry ny Columns CSS
Araka ny soso-kevitr'izy ireo, ny CSS Multiple Columns (fantatra amin'ny anarana hoe CSS3) dia mamela anao hizara votoaty ao anaty andalana maromaro. Ireo toetra fototra fototra CSS izay ampiasainao dia:
- tsanganana-fanisana
- tsanganana-gap
Ho an'ny isa-tsokajy, dia asio marika ny isa sasao tianao. Ny elanelam-pandrefesana dia ny rantsana na ny elanelana eo anelanelan'ireo tsanganana ireo. Ny solosaina dia handray ireo soatoavina ireo ary hanasaraka ny votoaty amin'ny isan'ny isa napetrakao.
Ohatra miavaka amin'ny andian-tsoratra CSS amin'ny sehatra dia tokony hanaparitaka andian-tsoratra amin'ny votoaty maromaro ao anaty tsanganana maromaro, toy izay hitanao ao amin'ny lahatsoratry ny gazety. Milazà fa manana ny marika HTML manaraka ianao (mariho fa raha tadidiko, ohatra, dia manomboka ny fehintsoratra iray aho, raha ny fampiharana dia mety ho fehintsoratra amin'ny votoatin'ity marika ity):
Ny sasin-tenin'ity lahatsoratra ity
Raha toa ka manoratra ireto karazana CSS ireto ianao:
.content {-moz-column-count: 3; -webkit-column-count: 3; solo-tononkalo: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; gilaometatra: 30px; }Ity fitsipika CSS ity dia hanasaraka ny fizarana "votoatiny" amin'ny tsanganana 3 mitovy amin'ny banga eo amin'ny 30 pixels eo anelanelan'izy ireo. Raha te hanana rojo roa ianao raha tokony ho 3, dia hanova tsotra izao ny lanjany ary ny mpizahatany dia hanombatombana ny sakadin-dalan'ireo tsanganana ireo mba hizaràna ny votoatim-potoana. Mariho fa ampiasaintsika ny toetra amam-panofana fananana aloha, ary arahan'ireo fanambarana tsy voaomana.
Ny mora ampiasaina amin'izany dia ny fampiasana azy amin'ny Internet. Eny, afaka mizara ampahan-tsinjara maromaro ao anaty tsanganana maromaro ianao, saingy tsy mety ho ny traikefa tsara indrindra amin'ny Internet izany, indrindra raha ny halavan'ny andry dia mianjera eo ambanin'ny "fold" amin'ny efijery.
Ny mpamaky àry dia mila mamaky sy midina mba hamakiana ny votoatiny feno. Na izany aza, ny talen'ny CSS Columns dia mora araka ny hitanao eto, ary azo ampiasaina ny hanao mihoatra lavitra noho ny misaraka fotsiny ny votoatin'ny fehintsoratra sasantsasany - azo ampiasaina amin'ny layout.
Layout amin'ny Columns CSS
Lazao fa manana tranonkala misy votoaty misy kisary 3 ianao. Ity dia tranonkala malaza indrindra, ary mba hahatratrarana ireto andalana 3 ireto, dia mety hitifitra ny fizarazarana ao anatiny ianao. Ao amin'ny columns CSS dia mora kokoa izany.
Ireto misy ohatra HTML:
> Avy amin'ny blaogintsika
Ny votoaty dia hiditra eto ...
Fandrosoana ho avy
p>
Ny CSS hanangana ireo tsanganana marobe ireo dia nanomboka tamin'ny zavatra hitanao taloha:
.content {-moz-column-count: 3; -webkit-column-count: 3; solo-tononkalo: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; gilaometatra: 30px; }Ankehitriny, ny fanamby eto dia satria, raha te-hanaparitaka io votoaty io ny navigateur, raha toa ka tsy mitovy ny votoatin'ny votoatin'ity fizarazarana ity, dia hizara ny votoatin'ny fizarana tsirairay ny navigateur, manampy ny fanombohana azy amin'ny tsanganana iray ary Dia mitohy mankany amin'ny hafa (afaka mahita izany ianao amin'ny fampiasana ity code ity mba hanandramana fanandramana ary ampidino ny haben'ny votoaty ao anatin'ny fizarana tsirairay)!
Tsy izany no tianao. Tianareo ny tsirairay amin'ireny sehatra ireny mba hamoronana sehatra miavaka ary, na dia mety ho ny votoatin'ny fizarana tsirairay na kely na kely dia tsy tianao mihitsy izany. Azonao atao izany amin'ny alàlan'ny fampidiranao tsipika iray hafa an'ny CSS:
.content div {display: inline block; }Izany dia hanery ireo fizaràna izay ao anatin'ny "votoaty" mba hijanona tsy misy dikany na dia ampidirin'ny navigateur izany ho tsanganana maromaro aza. Na tsara kokoa aza, satria tsy manome na inona na inona aty amin'ny lahatahiry marimaritra izahay, dia hametra-panitsiana ireo tsanganana ireo rehefa miova ny tranonkala, ka mahatonga azy ireo ho fampiasa tsara ho an'ny tranonkala miresaka . Amin'io "style in-block" style eo amin'ny toerany, ny fizarazarana 3 tsirairay dia ho karazana votoaty samihafa.
Mampiasa Column-Width
Misy fananana hafa ankoatra ny "laharana sanda" azonao ampiasaina, ary miankina amin'ny filaharanao ny drafitra, dia mety ho safidy tsara kokoa ho an'ny tranokalanao izany. Ity dia "roapolo roapolo". Amin'ny fampiasana ny marika HTML mitovy amin'ny naseho azy teo aloha, azontsika atao ny manao izany amin'ny CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; Toro-làlana: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; gilaometatra: 30px; } .content div {display: inline block; }Ny fomba anaovana an'io asa io dia ny tranon'ilay tranonkala dia mampiasa io "roapolo" io ho ny sanda lehibe indrindra amin'io sehatra io. Noho izany raha tsy latsaky ny 500 pixel ny varavarankely, dia hiseho eo amin'ny tsanganana tokana ny fizarana 3, iray amin'ny tampon'ny iray hafa. Ity dia drafitra natokana ampiasaina amin'ny fampisehoana finday / kely.
Rehefa mihamitombo ny habaka fanovan'ny sehatr'asa ho ampy tsara ho an'ny tsanganana 2 miaraka amin'ireo lavaka voafaritra, ny navigateur dia mandeha avy hatrany amin'ny famolavolana tsipika mankany amin'ny tsanganana roa. Tohizo ny fampitomboana ny sakan'ny efijery ary amin'ny farany dia hahazo seza 3 ianao, miaraka amin'ny fizarazarana 3 misy ao amin'ny pejiny. Indray mandeha indray, ity dia fomba lehibe ahafahana mamorona sarisary malefaka kokoa , ary tsy mila mampiasa ny fangatahan'ny media ianao mba hanovàna ny karazana layout!
Toerana hafa an'ny Column
Ankoatra ireo fananana voarakitra eto, dia misy ihany koa ireo toetra misy "fitsipika mifehy", anisan'izany ny lokon'ny loko, ny style, ary ny habaka izay mamela anao hamorona fitsipika eo amin'ny tsangananao. Ireo dia ho ampiasaina fa tsy sisintany raha tianao ny hanana andalana maromaro manasaraka ny tsangananao.
Fotoana hanandramana
Amin'izao fotoana izao, ny CSS Multiple Colout Layout dia tena manohana azy. Amin'ny prefixes, maherin'ny 94% amin'ireo mpampiasa tranonkala dia afaka mahita ireo karazan-javatra ireo, ary ny vondrona tsy voatsikera dia tena dikan-teny maherin'ny tranonkala Internet Explorer izay mety tsy ho fanohananao intsony na izany aza.
Miaraka amin'io sehatra fanohanana io amin'izao fotoana izao, dia tsy misy antony tokony hanombohana ny fanandramana amin'ny Columns CSS sy ny fametrahana ireo karazana amin'ny tranokala vonona namboarina. Azonao atao ny manomboka ny fanandramanao amin'ny fampiasana ny HTML sy CSS voatanisa ato amin'ity lahatsoratra ity ary milalao miaraka amin'ny soatoavina samihafa mba hijery izay mety tsara indrindra ho an'ny fandaharanasan-tranonao.