Voici un exemple de classe simple à trois colonnes:
.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )Dont vous appliqueriez à un bloc de texte comme ceci:
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
Exemple
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
Notez que la hauteur de chaque colonne est auto-équilibrée, selon les spécifications.
Notez également que cette démo et cet exemple de code utilisent les préfixes de fournisseur moz et webkit, ne devraient fonctionner que dans les navigateurs Gecko (Firefox 1.5+, et al.) Et Webkit (Safari 3+, Chrome, et al.). Pas encore de support natif dans Internet Explorer ou Opera à ma connaissance.
Toutes les propriétés connexes
.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; )Vous pouvez également définir le column-width(avec des préfixes), mais il est généralement plus logique de le laisser calculer automatiquement cela.
La règle («règle», comme dans une ligne) divisera l'écart au milieu. Vous pouvez utiliser les mêmes valeurs que vous le feriez pour un border.
Veillez à ce que vos blocs de texte ne soient pas tellement hauts qu'ils soient plus hauts qu'une (assez petite) fenêtre de navigateur, sinon c'est le même problème que le texte étant plus large que la fenêtre du navigateur (faire défiler d'avant en arrière pour lire = craint). Considérez égalementtext-align: justify;
JavaScript de secours
Est présenté dans cet article A List Apart.