Cuando coloco cosas una al lado de la otra, estas se acomodan como pueden; si tienen diferentes alturas, quedarán espacios vacios, ya se aque usemos una tabla, hagamos que floten o, como en este caso, la propiedad display: inline-block; es lo normal, así se ve en cualquier navegador; no importa si son textos o imágenes:
123456789
Usando las nuevas propiedades del CSS3 podemos cambiar eso y ajustar el contenido en columnas de tal forma que desaparecen los espacios en blanco y se cree un mosaico pero, tiene una limitación, no funciona en Internet Explorer, ni siquiera en la versión 9 y sólo está previsto que sea soportado en la versión 10 que aún está en modo beta; de tal modo, el ejemplo inferior se verá igual que el anterior en ese navegador:
123456789
Ahora biem, quienes usen jQuery tienen la posibilidad de resolver esto con la ayuda de algunos plugins. El primero de ellos se llama columnizer y es el que me parece más interesante porque se adapta bien a situaciones distintas.
Basta colocar el script del plugin antes de <head> y luego, definir qué cosa queremos mostrar en columnas y cuáles son sus características. Si tuviera un ejemplo como el anterior que tiene esta estructura HTML:
Basta colocar el script del plugin antes de <head> y luego, definir qué cosa queremos mostrar en columnas y cuáles son sus características. Si tuviera un ejemplo como el anterior que tiene esta estructura HTML:
<div id="democols">
<span> ....... </span>
<span> ....... </span>
<span> ....... </span>
</div>
Debajo, llamaríamos a la función de este modo:
<script type='text/javascript'>
$('#democols').columnize({ columns: 5, lastNeverTallest: true});
</script>
y le agregaríamos:
<div style="clear:both;"></div>
para eliminar las flotaciones de las columnas.
Las posibilidades son varias; podemos dimensionar el contenedor donde se mostrará y decirle a la función que lo divida en cierta cantidad de columnas o bien decirle que genere columnas de determinado tamaño:
Las posibilidades son varias; podemos dimensionar el contenedor donde se mostrará y decirle a la función que lo divida en cierta cantidad de columnas o bien decirle que genere columnas de determinado tamaño:
$('#democols').columnize({ columns: 4 });
$('#democols').columnize({ width: 200 });Opciones extras permiten definir el tipo de flotación (left o right), establecer si evitamos que la última columna sea la más alta, permitir que se rearmen las columnas cuando se redimensiona el contenedor, etc. También se agregan clases que permiten controlar esas columnas o usar algunas otras especiales para controlar los detalles. Todo eso puede verse en la página del autor y los ejemplos se incluyen en el ZIP que podemos descargar y estudiar.
El resultado, será este y debería funcionar pefectamente en Internet Explorer:
El resultado, será este y debería funcionar pefectamente en Internet Explorer:
123456789
Otro plugin que hace algo similar es Wookmark que me aprece menos intuitivo pero que también funciona en cualquier navegador.
Como en el caso anterior, ponemos el plugin antes de </head> y debajo del HTML, agregamos la función que, en este caso, diría algo así:
Como en el caso anterior, ponemos el plugin antes de </head> y debajo del HTML, agregamos la función que, en este caso, diría algo así:
<script type='text/javascript'>
$('span').wookmark({container: $('#democols'),itemWidth: 120,autoResize: true});
</script>
donde el selector no es el contenedor sino el contenido, sea esta una etiqueta o una clase y el contenedor se agrega en las opciones junto con el ancho de las columnas.
Usando ese plugin, se vería esto:
Usando ese plugin, se vería esto:
123456789
Como se ve, hay diferencias en el resultado que generan ambos.
No hay comentarios:
Publicar un comentario