UL+CSS для расположения сетки
У меня есть сгенерированный сервером 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 путь, который позволит расположение сетки, которое я хочу и не осуществлю изменение разметки?
3 ответа
Встроенные блоки , возможно, могут быть здесь полезны.
Вариант 1: Задайте им явную высоту
Варианты 2: Используйте nth-child (с ограниченной поддержкой)
В вашем примере вы, кажется, хотите присвоить каждой строке ту же высоту, что и самый большой li в этой строке. Если эта высота переменная, то, что вы хотите, возможно только с nth-child:
li:nth-child(3n+0) { clear: left; }