UL + CSS для разметки сетки

Question

У меня есть сгенерированный сервером HTML как:

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

Все блоки имеют известную ширину 200 пикселей и неизвестную высоту. Я хочу, чтобы <li> был организован в виде таблицы следующим образом:

На данный момент у меня есть следующее css:

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

Все хорошо, за исключением того, что столбцы не имеют одинаковую высоту. И в приведенном выше примере блок № 4 «схватился» за № 1, и результат не тот, чего я пытаюсь достичь:

Существует ли какой-либо кросс-браузерный способ на чистом CSS, который позволит мне макет сетки и не будет приводить к изменению разметки?

Answer 1

Встроенные блоки могут быть полезны здесь.

Answer 2

В вашем примере вы, похоже, хотите, чтобы каждая строка имела одинаковую высоту самого большого li в этом ряду. Если эта высота является переменной, то, что вы хотите, возможно только с nth-child:

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

Answer 3

Вариант 1: дать им явные высоты

Опции 2: Используйте nth-child (с ограниченной поддержкой)