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.
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.
6 comentarios:
El futuro está en tus manos jQuery :)
Sin duda, va camino a convertirse en un standard.
JMur, he seguido los pasos de una de tus entradas, la de "Posts relacionados con miniaturas", he agregado todo, y lo he personalizado todo con CSS, pero, al final, no me aparecen las imagenes, y en el h2 y la descripción me aparece "undefinied"... ¿Será un error de lectura del script? Te dejo aquí la URL de mi blog: http://superbloggeroswebs.blogspot.com.es/2012/02/eliminar-virus-autoruninf-de-un-usb.html
En cuánto a la entrada, voy a hacer experimentos en un blog de pruebas con todo lo explicado, a ver si consigo algo decente.
Un gran saludo, no conocía tu blog, estúpendo, te sigo desde todas las partes! xD
Por lo que veo, te falta ejecutra la funcion leerpostetiquetas() que es la que lee las etiquetas de la entrada. El script está pero no has agregado una parte y que debe ir antes de mostrarlos.
Ahora, simplemente meustra eso porque no hay contenido que mostrar.
Esto esta genial pero, como se supone que lo haga en blogger? No entiendo mucho.
No sé que quieres hacer.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...