Flera kolumner - CSS-tricks

Här är ett exempel på en enkel klass med tre kolumner:

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

Varav skulle du tillämpa på ett textblock som så:


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

Exempel

Pellentesque habitant morbi tristique senectus et netus et malesuada berömmar 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

Observera att höjden på varje kolumn är automatiskt balanserad enligt specifikationen.

Observera också att denna demo och exempelkod använder moz- och webkit-leverantörsprefix, bör bara fungera i webbläsare Gecko (Firefox 1.5+, et al.) Och Webkit (Safari 3+, Chrome, et al.). Inget native support i Internet Explorer eller Opera ännu som jag känner till.

Alla relaterade egenskaper

.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 också ställa in column-width(med prefix) men det är i allmänhet mer meningsfullt att låta det automatiskt beräkna det.

Regeln ("regel", som i en rad) kommer att dela upp klyftan i mitten. Du kan använda samma värden som du skulle göra border.

Var försiktig så att dina textblock inte är så enorma att de är högre än ett (ganska litet) webbläsarfönster, annars är det samma problem som att texten är bredare än webbläsarfönstret (bläddrar fram och tillbaka för att läsa = suger). Tänk också påtext-align: justify;