Coloane multiple - CSS-Tricks | Fragmente de cod 2025

Iată un exemplu de clasă simplă cu trei coloane:

.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )

Din care ați aplica un bloc de text de genul:


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Exemplu

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Rețineți că înălțimea fiecărei coloane este echilibrată automat, conform specificațiilor.

Rețineți, de asemenea, că această demonstrație și eșantionul de cod utilizează prefixele furnizorilor de moz și webkit, ar trebui să funcționeze numai în browserele Gecko (Firefox 1.5+ și colab.) Și Webkit (Safari 3+, Chrome și colab.). Nu știu încă suport nativ în Internet Explorer sau Opera.

Toate proprietățile conexe

.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : 20px; -moz-column-rule-color: #ccc; -moz-column-rule-style: solid; -moz-column-rule-width: 1px; -webkit-column-rule-color: #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width: 1px; )

De asemenea, puteți seta column-width(cu prefixe), dar în general are mai mult sens să-l lăsați să calculeze automat acest lucru.

Regula („regulă”, ca în, o linie) va împărți decalajul până la mijloc. Puteți utiliza aceleași valori ca și a border.

Aveți grijă să nu aveți blocurile de text atât de înalte încât să fie mai înalte decât o fereastră de browser (destul de mică), altfel este aceeași problemă cu textul fiind mai larg decât fereastra browserului (derulând înainte și înapoi pentru a citi = suge). De asemenea, ia în consideraretext-align: justify;