使浮动列表元素等于高度（使用纯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支持率较低。

例