Alinear divs horizontalmente

[manuelin01]

Hola.
Espero que alguien me pueda ayudar... tengo una serie de divs (un numero indeterminado, depende de una consulta a la base de datos) los cuales tienen un tamaño variable. Estos divs tienen las propiedades siguientes: float:left y width:30%. El problema que tengo es que al mostrar los divs por pantalla, en el momento en que un div tenga un tamaño distinto al resto, me descompone toda la alineacion de los divs :S

Lo que me gustaria hacer seria que cuando uno de los divs tenga un tamaño mayor que el resto, la siguiente fila de divs aparezca alineada horizontalmente...

Adjunto una imagen para aclarar un poco lo que me gustaria...

Estoy casi seguro que existe alguna propiedad css que puede hacer esto... o sino un pequeño con html para conseguirlo...

Recalcar que el numero de divs es indefinido y no puedo crear un contenedor para cada grupo de 3 divs para alinearlos...

Espero que alguien me pueda ayudar, se lo agradeceria mucho!!!

Gracias!

[pzin]

¿Puedes poner el código que estás usando? En este foro una linea dice más que mil imágenes.

[ryugen]

Como dice pzin, sin ver demasiado código no creo que se pueda hacer mucho, pero creo que tu problema se solucionaría de la siguiente manera, a los divs indeterminados esos que tus dices deberían tener las siguientes etiquetas:

Código CSS:

div {
   display:inline-block; /*Los convierte en bloques en lineas, lo que hace que al completarse una linea (de tres en tu caso, el proximo baje a la línea de abajo. El alto de la linea estaría formado por el div mas alto*/
   width: 30%; /*El ancho que tu definiste*/
   vertical-align:top; /*Para que se alineen al comienzo de la linea y no a la base (comportamiento por defecto*/
   *display: inline; /*Para que funcione en IE7, en caso de ser necesario*/
   zoom: 1;/*Para que funcione en IE7, en caso de ser necesario*/
}
 

Aqui tienes un ejemplo funcionando: http://jsfiddle.net/Y2NqT/5/

[CorpseOfSteel]

Iniciado por ryugen

Como dice pzin, sin ver demasiado código no creo que se pueda hacer mucho, pero creo que tu problema se solucionaría de la siguiente manera, a los divs indeterminados esos que tus dices deberían tener las siguientes etiquetas:

Código CSS:

div {
   display:inline-block; /*Los convierte en bloques en lineas, lo que hace que al completarse una linea (de tres en tu caso, el proximo baje a la línea de abajo. El alto de la linea estaría formado por el div mas alto*/
   width: 30%; /*El ancho que tu definiste*/
   vertical-align:top; /*Para que se alineen al comienzo de la linea y no a la base (comportamiento por defecto*/
   *display: inline; /*Para que funcione en IE7, en caso de ser necesario*/
   zoom: 1;/*Para que funcione en IE7, en caso de ser necesario*/
}
 

Aqui tienes un ejemplo funcionando: http://jsfiddle.net/Y2NqT/5/

Hola Ryugen, gracias por el link, yo estaba buscando algo parecido, pero que en el caso de que el div tenga menos altura, en vez de quedar un hueco en blanco, el div que está abajo suba para no dejar márgenes. ¿Es posible hacer esto?.

Gracias de antemano.