[SOLUCIONADO] Hacer que <li> de altura diferente se alinien

[zyxer]

Hola, tengo un conjuto de <li> en mi pagina que tienen diferente altura. Si entran a mi pagina http://dev.toyalante.net/v.1.1/index.php podrán ver que el problema claramente. Lo que quiero es que la altura de cada uno, no influya en que se alejen mas del otro, sino que se mantengas todos los cuadro unidos.

[fullmental]

Hace unas semanas estuve buscando cómo hacer lo mismo. lo resolví con JS y Jquery

Para eso hice la siguiente función JS que requiere jquery en tu página:

Código:

function normalizeHeights(arrayToNormalize){
		var maxHeight = -1;
		$(arrayToNormalize).each(function() {
		    if ($(this).height() > maxHeight)
		        maxHeight = $(this).height();
		});
		$(arrayToNormalize).each(function() {
		    $(this).height(maxHeight +10);
		});
	}

En tu caso tendrías lllamar a la función de la siguiente forma:

Código:

$(document).ready(function(){
   normalizeHeights("#work-items li");
});

Espero te sirva, saludos.

Puedes verlo funcionando aqui: http://dinamo.mx/touch

[zyxer]

Gracias y disculpa la tardanza a la hora de responder (tuve un problema con con el internet y no quería hacerlo desde otro lugar que no sea mi casa porque se me complicaría demasiado darle seguimiento, pero ya está todo bien).

Intenté la solución que me propusiste, pero esa función lo que hace es hacer que todos los <li> tomen la misma altura del que tenga la altura mayor (me gusta, la guardaré para futuras ocasiones), pero en este caso lo que busco es que cada <li> conserve su propia altura y se mantenga unido a los otros <li>. Algo como lo que se ve en esta imagen http://i.stack.imgur.com/WSwv4.jpg

PD: Estoy tratando de evitar las librerías en la medida de lo posible...

EDITO: Encontré la solución aquí: http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

[pzin]

Aparte de Masonry y parecidos hechos con JavaScript, podrías usar columnas CSS.