UL + CSS dla układu siatki

Question

Mam html serwera generowane odczuwalna:

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

Wszystkie bloki mają szerokość 200px znany i nieznany wysokość. Chcę <li> zostać umieszczone w tabeli podobny sposób jak poniżej:

Co mam teraz jest następujący CSS:

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

wszystko jest w porządku, poza tym, że kolumny nie uzyskać równe wysokość. A w przykładzie powyżej blok # 4 „wyrwać” na # 1, a wynik nie jest, co usiłuję osiągnąć:

Czy istnieje czystej CSS sposób cross-browser, który pozwoli siatkę układ chcę i nie wymuszam zmiany znaczników?

Answer 1

Inline blocks być może być tu przydatny.

Answer 2

Wariant 1: Daj im wyraźne wysokości

Opcje 2: Użyj nth-child (który ma ograniczone wsparcie)

Answer 3

W przykładzie wydaje się, chcą dać każdy wiersz taką samą wysokość największego Li w które rząd. Jeśli wysokość ta jest zmienna, co chcesz, jest możliwe tylko z n-dziecko:

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