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

1
2
3
4
5
6
7
<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.

1
2
3
4
5
6
7
...
<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.

Ejemplo:

Compatibilidad navegadores:

Artículos relacionados

Optimización página web – Paso 2 – Accesibilidad... Como mas accesible sea la web, el Sr. Google mas nos valora. Para seguir las normas de accesibilidad, hay que cumplir algunas normas que en el siguien...
HTML5 – Números de teléfono Muchas veces, al hacer una página 'responsive' ponemos en nuestro código un teléfono. HTML5, sobretodo en los navegadores de móviles, pueden hacer que...
Construct2 – Crear juegos para HTML5 Os presentamos un framework para crear visualmente juegos para la plataforma HTML5. Conect2. Existen varias versiones, entre ellas la gratuita. Ést...
Optimizar ficheros css para disminuir el tiempo de... Como ya explicamos en una artículo anterior, en ocasiones encontramos problemas que afectan al tiempo de carga de nuestra web. Llamamos a muchas hojas...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*