UL + CSS para diseño de cuadrícula

Question

I tiene un html generado por el servidor como:

<ul> 
    <li><!-- few nested elements that form a block --></li> 
    <li><!-- few nested elements that form anaother block --></li> 
    <li><!-- etc, X times --></li> 
</ul> 

Todos los bloques han conocido anchura 200 px y la altura desconocido. Quiero <li> a estar dispuestos en manera de la tabla similar a la siguiente:

Lo que tengo por ahora está siguiendo css:

li { 
    display: block; 
    width: 200px; 
    float: left; 
    margin: 10px; 
} 

Todo está bien, excepto que las columnas no reciben igual altura. Y en el ejemplo anterior el bloque # 4 “arranque” en el # 1 y el resultado no es lo que estoy tratando de lograr:

¿Hay alguna forma pura-CSS multi-navegador que permitirá rejilla diseño ¿Quiero y no haré cumplir el cambio de marcado?

Answer 1

Inline blocks quizá podría ser útil aquí.

Answer 2

Opción 1: Dales alturas explícitas

Opciones 2: Uso nth-child (que tiene un soporte limitado)

Answer 3

En su ejemplo que parece querer dar a cada fila de la misma altura de los más grandes li en ese fila. Si esta altura es variable lo que quiere es sólo es posible con nth-child:

li:nth-child(3n+0) { clear: left; }