Esta es una de la propiedades más interesantes, usualmente lo que hacía era utilizar un DIV flotante por cada columna con un margen a la derecha y así generaba unas columnas pero si se quiere que el texto se acomode automáticamente el truco simplemente no funciona.
En CSS3 tenemos 4 propiedades para las columnas:
Estableciendo el ancho de las columnas
1 2 | -moz-column-width: 15em; -webkit-column-width: 15em; |
Cómo indicar la separación entre columnas
1 2 | -moz-column-gap: 2em; -webkit-column-gap: 2em; |
Y si quiero una línea entre cada columna
1 2 | -moz-column-rule: 1px solid #ccc; -webkit-column-rule: 1px solid #ccc; |
El uso de esta propiedad es similar al actual border, así fijamos el ancho, tipo(sólido, punteado,…) y el color.
¿Se puede fijar un ancho automático?
Si, también es posible indicar el número de columnas y hacer que el ancho se fije automáticamente.
1 2 3 4 | -moz-column-count: 3; -moz-column-gap: 2em; -webkit-column-count: 5; -webkit-column-gap: 2em; |
En ese ejemplo establecemos el uso de 3 columnas.
Este ejemplo sólo funciona en navegadores modernos, no hay hack para IE. Mauris ac risus et justo fringilla semper. Duis quis nisl nisl, sed euismod nisi. Aenean ultricies ultricies sagittis. Nunc in aliquam nibh. Pellentesque id ipsum nunc, sit amet tempus leo. Nunc sit amet diam neque, sit amet rhoncus magna. Quisque in mi tortor, non congue felis. Quisque non elit felis, sed porttitor risus. Aliquam vehicula ligula non enim tempus a tristique velit condimentum. Nulla interdum fermentum sem, ac euismod dui iaculis ut. Vivamus a justo metus. Etiam sit amet ligula dui; id iaculis justo. Pellentesque fermentum sapien fermentum augue feugiat viverra.