html, php y css

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

Three.js – WW2Viewer añadiendo Spitfire MK I... Este fin de semana he añadido un nuevo vehículos de la Segunda Guerra Mundial a mi catálogo 3D online. WW2Viewer es un pequeño proyecto realizado con ...
Escoger una buena fuente para la web En muchos momentos del diseño web, llega la hora de escoger que tipo de fuente utilizar. Los que hayáis estudiado algún tipo de curso, ingeniería o gr...
MySQL – Listar registros aleatorios Pequeño código para que MySQL liste un determinado número de registros aleatoriamente. Ejemplo: En una tabla 'jugadores' tenemos los datos de los j...
Optimizar ficheros js para disminuir tiempo de car... En muchas ocasiones nos encontramos con un problema que afecta al tiempo de carga de nuestra web. Llamamos a muchos ficheros javascript desde nuestra ...