Ето пример за прост клас с три колони:
.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )От които бихте приложили към блок текст по следния начин:
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
Пример
Pellentesque обитател 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
Имайте предвид, че височината на всяка колона е автоматично балансирана, според спецификацията.
Също така обърнете внимание, че този демонстрационен и примерен код използва префиксите на доставчици на moz и webkit, трябва да работи само в браузърите Gecko (Firefox 1.5+ и др.) И Webkit (Safari 3+, Chrome и др.). Все още няма собствена поддръжка в Internet Explorer или Opera, за която знам.
Всички свързани свойства
.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; )Можете също да зададете column-width(с префикси), но като цяло има по-смисъл да го оставите автоматично да изчисли това.
Правилото („правило“, като в линия) ще раздели празнината по средата. Можете да използвате същите стойности като a border.
Внимавайте текстовите ви блокове да не са толкова високи, че да са по-високи от (сравнително малък) прозорец на браузъра, в противен случай това е същият проблем като текстът да бъде по-широк от прозореца на браузъра (превъртане напред и назад, за да се чете = гадно) Също така помислетеtext-align: justify;
JavaScript резервен
Представен е в тази A List Apart статия.