Colonne multiple - Trucchi CSS | Frammenti di codice 2025

Ecco un esempio di una semplice classe a tre colonne:

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

Di cui ti applicheresti a un blocco di testo in questo modo:


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

Esempio

Pellentesque habitant morbi tristique senectus et netus et maschiuada 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. Vestibolo 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

Notare che l'altezza di ogni colonna è bilanciata automaticamente, come da specifica.

Nota anche che questa demo e il codice di esempio utilizzano i prefissi dei fornitori moz e webkit, dovrebbero funzionare solo nei browser Gecko (Firefox 1.5+, et al.) E Webkit (Safari 3+, Chrome, et al.). Nessun supporto nativo in Internet Explorer o Opera ancora che io sappia.

Tutte le proprietà correlate

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

Puoi anche impostare column-width(con prefissi) ma in genere ha più senso lasciarlo calcolare automaticamente.

La regola ("regola", come in una linea) dividerà il divario a metà. Puoi utilizzare gli stessi valori di un file border.

Fai attenzione che i tuoi blocchi di testo non siano così enormemente alti da essere più alti di una finestra del browser (abbastanza piccola), altrimenti è lo stesso problema del testo che è più largo della finestra del browser (scorrere avanti e indietro per leggere = fa schifo). Considera anchetext-align: justify;