UL + CSS per il layout a griglia

Question

Ho un html generato dal server come:

<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> 

Tutti i blocchi hanno conosciuto la larghezza e l'altezza 200px sconosciuta. Voglio <li> ad essere concordati in tavola come la moda in questo modo:

Quello che ho per ora sta seguendo css:

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

Tutto è bene, tranne che le colonne non si ottiene uguale altezza. E nell'esempio precedente blocco # 4 “strappare” al # 1 e il risultato non è quello che sto cercando di realizzare:

Esiste un puro-CSS modo cross-browser che permetterà di griglia layout Voglio e non imporrà il cambiamento del markup?

Answer 1

Inline blocks potrebbe forse essere utile qui.

Answer 2

Opzione 1: Dare loro altezze esplicite

Opzioni 2: Utilizzare nth-child (che ha un supporto limitato)

Answer 3

Nel tuo esempio ti sembra di voler dare ogni riga della stessa altezza del più grande li in quel riga. Se questa altezza è variabile ciò che si vuole è possibile solo con nth-child:

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