Filas dinámicas, en forma de tabla, de elementos de lista usando CSS y jQuery

Question

Tengo una lista de elementos de contenido, cada uno con un ancho determinado pero con alturas diferentes (variables). Cada elemento de la lista flotará a la izquierda. El código HTML y CSS son los siguientes:

<style type="text/css"> 
    li{ 
    float: left; 
    width: 200px; 
    } 
    li img{ 
    float: right; 
    } 
</style> 

<ul> 
    <li><h3>Item One</h3> 
     <img src="one.png"> 
     <p>First item content here</p> 
    </li> 
    <li><h3>Item Two</h3> 
     <img src="two.png"> 
     <p>Second item content here</p> 
    </li> 
    <li><h3>Item Three</h3> 
     <img src="three.png"> 
     <p>Third item content here</p> 
    </li> 
    <li><h3>Item Four</h3> 
     <img src="four.png"> 
     <p>Fourth item content here</p> 
    </li> 
    <li><h3>Item Five</h3> 
     <img src="five.png"> 
     <p>Fifth item content here</p> 
    </li> 
</ul> 
</style> 

El problema que tengo tiene que ver con la forma en que los objetos flotan izquierda si hay suficiente espacio en una fila por 3 artículos y el segundo punto es más alto que entonces cuarto punto . El cuarto punto no iniciará una nueva fila, pero en su lugar colocar a la derecha del segundo elemento de esta manera:

Lo que quiero es que los elementos de la lista-para formar una especie de forma de mesa estructura que alineará cada fila muy bien después de la fila anterior a una altura igual al elemento más alto de la fila anterior. En lugar de lo que tengo arriba, yo quiero que se vea como esto:

También me gustaría ser capaz de escalar la anchura del div que contiene tal que los artículos-por-fila ajustar según sea necesario . Por ejemplo, si un div que contiene se hace más ancho (es decir, si el usuario vuelve a clasificar según el tamaño la ventana) la cantidad de artículos por fila aumenta para llenar el espacio. He aquí un ejemplo del problema relacionado en un recipiente más amplia:

Y aquí está lo que yo quiero que haga:

Basado en una pregunta anterior, I don' Creo que hay una solución fácil para esto, así que quiero usar jQuery para hacerlo.

Lo que estoy pensando es el uso de jQuery para hacer algo como:

Paso 1. Establecer el ancho de cada elemento a ElementWidth

var elementWidth = 200; // 200px 

Paso 2. Establecer una variable containerWidth al ancho del contenedor general

var containerWidth = $('#container').width(); 

Paso 3. Divida el containerWidth por el ElementWidth para determinar el número de elementos por fila

var elementsPerRow = containerWidth/elementWidth; 

Paso 4. Añadir la propiedad clear: left; cada elemento elementosPorFila -ith lista

for(x = 0, x < (total number of all elements), x + elementsPerRow){ 
    // set clear:left to this <li> 
} 

No soy muy bueno (principiante) con JavaScript y jQuery. ¿Puede alguien ayudarme a juntar esto en una buena pieza de código que puedo copiar y pegar (y aprender de)?

¡Gracias!

Answer 1

El problema es que está tratando de usar float: left cuando debe usar display: inline-block. No es necesario usar javascript tampoco.

li { 
    vertical-align: top; 
    display: inline-block; } 

Ver: http://jsfiddle.net/Wexcode/zgNkA/