Сделать плавающие элементы списка равными по высоте (с чистым CSS)

Question

У меня есть список списков. Сублисты плавают слева. Смотри http://jsfiddle.net/P4Psf/

Есть ли способ заставить эти столбцы иметь ту же высоту, что и их соседи (то есть элементы 1, 2 и 3 имеют одинаковую высоту, а затем 4, 5, 6 равную высоту (но, конечно, отличается от 1,2,3 ) и т. д.)?

В данный момент 7 и 8 ставят себя ниже 5 и 6, где они на самом деле должны быть ниже 4 и 5.

Конечно, я мог бы сделать это с помощью javascript, но я надеюсь, что есть чистое решение CSS, которое работает (по крайней мере) в современных браузерах?

Answer 1

Добавьте это к своему CSS:

ul.themenboxen > li:nth-child(3n+1) {
    clear: both;
}

Это будет буквально искать в этой форме:

1. Найти все элементы, которые соответствуют :nth-child(3n+1), что означает каждый третий элемент внутри его родителя.
2. Фильтруйте только тех, кто li с.
3. Фильтровать только тех, кто является прямым потомком ul.themenboxen.

Или по-английски, найдите каждый третий элемент непосредственно внутри ul.themenboxen и примените к нему clear: both.

Примечание: Я не уверен насчет более низкой поддержки IE.

Пример * ** 1029 тысяча двадцать-восемь *