Tu je primer preprostega razreda v treh stolpcih:
.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )Od tega bi jih uporabili za blok besedila takole:
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
Primer
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. Enejski 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
Upoštevajte, da je višina vsakega stolpca samodejno uravnotežena, v skladu s specifikacijami.
Upoštevajte tudi, da ta predstavitvena in vzorčna koda uporablja predpone ponudnikov moz in webkit, ki naj bi delovala samo v brskalnikih Gecko (Firefox 1.5+ in drugi) in Webkit (Safari 3+, Chrome in drugi). V Internet Explorerju ali Operi še nisem našel nobene podpore, za katero vem.
Vse povezane lastnosti
.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; )Lahko tudi nastavite column-width(s predponami), vendar je na splošno bolj smiselno, da se samodejno izračuna.
Pravilo (»pravilo«, kot v vrstici) bo razdelilo vrzel po sredini. Uporabite lahko enake vrednosti kot a border.
Pazite, da ne bodo vaši besedilni bloki tako izjemno visoki, da so višji od (dokaj majhnega) okna brskalnika, sicer gre za enako težavo, kot da je besedilo širše od okna brskalnika (pomikanje naprej in nazaj za branje = zanič). Upoštevajte tuditext-align: justify;
Nadomestni JavaScript
Je predstavljen v tem članku A List Apart.