Ево примера једноставне класе у три колоне:
.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
Пример
Пеллентескуе хабитант морби тристикуе сенецтус ет нетус ет малесуада фамес ац турпис егестас. Вестибулум тортор куам, феугиат витае, ултрициес егет, темпор сит амет, анте. Донец еу либеро сит амет куам егестас семпре. Аенеан ултрициес ми витае ест. Маурис плацерат елеифенд лео. Куискуе сит амет ест ет сапиен улламцорпер пхаретра. Вестибулум ерат виси, цондиментум сед, цоммодо витае, орнаре сит амет, виси. Енејски ферментум, елит егет тинцидунт цондиментум, ерос ипсум рутрум орци, сагиттис темпус лацус еним ац дуи. Донец нон еним ин турпис пулвинар фацилисис. Ут фелис. Праесент дапибус, некуе ид цурсус фауцибус, тортор некуе егестас аугуе, еу вулпутате магна ерос еу ерат. Аликуам ерат волутпат. Нам дуи ми, тинцидунт куис, аццумсан порттитор, фацилисис луцтус, метус
Имајте на уму да је висина сваке колоне аутоматски уравнотежена, у складу са спецификацијама.
Такође имајте на уму да овај демо и узорак кода користи префиксе добављача моз и вебкит, требало би да функционише само у прегледачима Гецко (Фирефок 1.5+ и др.) И Вебкит (Сафари 3+, Цхроме и др.). Још увек немам изворну подршку за Интернет Екплорер или Опера, за коју знам.
Сва сродна својства
.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(са префиксима), али генерално је логичније пустити га да то аутоматски израчуна.
Правило („правило“, као у линији) поделиће празнину по средини. Можете користити исте вредности као и border.
Пазите да ваши блокови текста не буду толико високи да су виши од (прилично малог) прозора прегледача, иначе је то исти проблем као што је текст шири од прозора прегледача (померање напред и назад за читање = срање). Такође размотритеtext-align: justify;
ЈаваСцрипт резервни
Представљен је у овом чланку А Лист Апарт.