У меня есть сгенерированный сервером 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, который позволит мне использовать макет сетки и не будет применять изменения разметки?