Listados y contenidos multicolumna con CSS3
Qué tiempos aquellos cuando para poner contenidos multicolumnas en una página web, nos peleábamos con las listas multicolumna. Empecemos con Listados y contenidos multicolumna con CSS3.
Mediante márgenes, paddings y tamaños de contenedores, conseguíamos mostrar en el navegador un contenido en diversas columnas.
Ahora eso ha cambiado con CSS3. Es tan fácil como asignar una clase a un contenedor. Fijaos que los atributos son diferentes según el navegador que utilices. Por ese motivo, debemos poner los tres que véis aquí para que el efecto se aplique en todos los navegadores:
<style>
.multicolumna {
-webkit-column-count: 4; // Chrome, safari, opera
-moz-column-count: 4; // Firefox
column-count: 4;
}
</style>
Luego asignamos la clase al contenedor cuyo contenido queremos dividir en columnas. Atentos porque el tamaño lo hace de forma automática, y no será el mismo resultado para diferentes formatos de texto. Lógicamente no quedará igual si los textos que contiene el contenedor son de diferentes tamaños. Para que el resultado final sea el esperado, deberemos ir jugando con tamaños.
...
<body>
<div class="multicolumna">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</div>
</body>
...
Los navegadores antiguos no lo soportan. Ahora, al que tenga navegador antiguo, deberíamos cogerlo por las orejas… venga !!! espavila y actualiza navegador. Recordad que es CSS3.
Esperamos que os haya sido de utilidad el artículo Listados y contenidos multicolumna con CSS3.
Más información