Meerdere kolommen - CSS-trucs | Codefragmenten 2025

Hier is een voorbeeld van een eenvoudige klasse met drie kolommen:

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

Waarvan je zou solliciteren op een tekstblok als volgt:


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

Voorbeeld

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

Merk op dat de hoogte van elke kolom automatisch is uitgebalanceerd, volgens de specificatie.

Merk ook op dat deze demo en voorbeeldcode moz- en webkit-leveranciersvoorvoegsels gebruikt, alleen zou moeten werken in Gecko (Firefox 1.5+, et al.) En Webkit (Safari 3+, Chrome, et al.) Browsers. Geen native ondersteuning in Internet Explorer of Opera die ik ken.

Alle gerelateerde eigenschappen

.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; )

U kunt ook de column-width(met voorvoegsels) instellen, maar het is over het algemeen logischer om dit automatisch te laten berekenen.

De regel ("regel", zoals in een regel) zal de opening in het midden splitsen. U kunt dezelfde waarden gebruiken als bij een border.

Zorg ervoor dat uw tekstblokken niet zo enorm groot zijn dat ze groter zijn dan een (vrij klein) browservenster, anders is het hetzelfde probleem als tekst die breder is dan het browservenster (heen en weer scrollen om te lezen = stom). Overweeg ooktext-align: justify;