Ось приклад простого триколонного класу:
.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 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. Eenean 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.