Razporeditev več stolpcev (enako reviji) Z CSS3
Na splošno bodo ljudje pri branju zelo dolge vsebine izgubili sled. Zato je v tiskanih medijih, kot so revije in časopisi, vsebina razdeljena na več stolpcev za lažje branje.
Ustvarjanje stolpca na spletu je popolnoma drugačna zgodba. To je zelo težko. Pravzaprav, ne predolgo, boste morda morali ročno razdeliti vsebino na nekaj divs in jo odložite v desno ali levo, nato pa določite širino, oblazinjenje, robove, obrobe itd.
Toda stvari so zdaj precej poenostavljene z CSS3 Multi Column Module. Kot nam jasno ponazarja ime, nam ta modul omogoča, da vsebino razdelimo v razporeditev v stolpce, ki jo vidimo v časopisih ali revijah.
Podpora za brskalnik
V vseh brskalnikih je trenutno podprtih več stolpcev - Firefox 2+, Chrome 4+, Safari 3.1+ in Opera 11.1 - razen, kot je bilo predvideno, Internet Explorer, vendar se zdi, da je naslednja različica, IE10, začela zagotavljati podporo za ta modul.
Za ostale brskalnike Firefox še vedno potrebuje -moz- , medtem ko Chrome in Safari potrebujeta -webkit- predpona. Opera ne zahteva nobenih predpon, zato lahko uporabimo le uradne lastnosti.
Vir: Kdaj lahko uporabim CSS3 Multiple razporeditev stolpcev?
Ustvarite več stolpcev
Preden ustvarimo stolpce, smo pripravili nekaj besedilnih odstavkov za predstavitev, ki smo jih zavili v HTML5 kot sledi;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum v augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat v. Integer vitae posledica augue. //in tako naprej
… In določite širino za 600px iz slogovnega lista, to je to.
Zdaj pa začnimo ustvarjati stolpce.
V spodnjem primeru bomo vsebino razdelili na dva stolpca z štetje stolpcev nepremičnine. Ta lastnost bo brskalniku povedala, da vsebino v stolpcih upodobi z določeno številko in naj brskalnik določi ustrezno širino za vsak stolpec.
št. -moz-column-count: 2; štetje kolone: 2;
Poleg tega, da so definirani s štetjem, lahko stolpce ustvarite z določitvijo širine z uporabo širina stolpca in zapusti brskalnik, da se odloči, koliko stolpcev naj bo ustvarjenih.
V tem primeru določimo širino stolpca za 150px, rezultat je bil razdeljen na tri stolpce.
članek -moz-column-width: 150px; -webkit-column-width: 150px; širina stolpca: 150px;
Kot je navedeno v specifikaciji dejanska širina stolpca je lahko širša ali ožja od določene širine stolpca, odvisno od razpoložljivega prostora. Če tudi vrednost širine ni izrecno podana, bo “samodejno” kot privzeto, kar lahko pomeni tudi “ni stolpca”.
Razmik stolpcev
Razmik stolpcev določite presledke, ki ločujejo vsak stolpec. Vrednost vrzeli lahko navedete v em ali px, vendar kot je navedeno v specifikaciji vrednost ne more biti negativna. V spodnjem primeru navedemo vrzel za 30px, zato so prostori med stolpci nekoliko širši.
članek -webkit-column-gap: 30px; -moz-column-gap: 30px; vrzel v stolpcu: 30px;
Pravilo stolpca
Če želite dodati meje med stolpec, lahko uporabite pravilo stolpca lastnine, ki deluje zelo podobno meje nepremičnine. Torej, recimo, če želimo postaviti stolpičasto mejo, lahko pišemo;
članek -moz-column-rule: 1px označen z #ccc; -webkit-column-rule: 1px označena z #ccc; column-rule: 1px označena z #ccc;
Razpon stolpca
Ta lastnost deluje precej podobno colspan v tabela oznaka. Skupna izvedba te lastnosti je, da se naslov vsebine razteza v vseh stolpcih. Tukaj je primer.
članek h1 -webkit-column-span: vse; razpon stolpca: vse;
V zgornjem primeru smo definirali h1 da se raztezate čez vse stolpce in če je določen razpon stolpca, 1 bo privzeta. Na žalost ta lastnost v času tega pisanja deluje samo v operi in Chromeu.
Končne besede
To je vse za zdaj, prišli smo skozi vse bistvene stvari za ustvarjanje več stolpcev s CSS3, in kot smo že omenili na začetku, ta modul zelo dobro deluje v sodobnih brskalnikih, vendar v Internet Explorerju še ne deluje..
Navsezadnje upamo, da imate zdaj precej dobro razumevanje o tem, kako ustvariti stolpce s CSS3, in če imate čas za poskuse, lahko svoje metode in rezultate razložite v polje za komentarje spodaj. Hvala, ker ste prebrali to objavo in se zabavali.
- Demo
- Prenesi vir
