Flere kolonner - CSS-tricks | Kodestykker 2025

Her er et eksempel på en simpel klasse med tre kolonner:

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

Heraf vil du anvende en tekstblok som sådan:


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

Eksempel

Pellentesque habitant morbi tristique senectus et netus et malesuada berømmer 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. Ænean 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

Bemærk, at højden på hver søjle er automatisk afbalanceret i henhold til specifikationen.

Bemærk også, at denne demo og prøvekode bruger moz- og webkit-leverandørpræfikser, skal kun fungere i Gecko (Firefox 1.5+, et al.) Og Webkit (Safari 3+, Chrome, et al.) Browsere. Ingen indbygget support i Internet Explorer eller Opera endnu, som jeg kender til.

Alle relaterede egenskaber

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

Du kan også indstille column-width(med præfikser), men det giver generelt mere mening at lade det automatisk beregne det.

Reglen ("regel", som i en linje) vil opdele kløften i midten. Du kan bruge de samme værdier som du ville have gjort border.

Pas på ikke at dine tekstblokke er så enormt høje, at de er højere end et (ret lille) browservindue, ellers er det det samme problem, at teksten er bredere end browservinduet (rul frem og tilbage for at læse = suger). Overvej ogsåtext-align: justify;