使用纯CSS实现浮动列表元素等高

Question

我有一个列表，其中包含多个子列表，子列表向左浮动。请参见http://jsfiddle.net/P4Psf/。

是否有一种方法可以强制这些列与它们的邻居具有相同的高度（即使元素1、2和3具有相等的高度，然后4、5、6具有相等的高度（但当然与1、2、3不同）等等）？

目前，7和8会放置在5和6下面，而它们实际上应该在4和5下面。

当然，我可以使用JavaScript来解决此问题，但我希望有一种纯CSS解决方案适用于（至少）现代浏览器？

- Sorcy

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是否支持此方法。

示例

- Madara's Ghost

---

先生，您真是位学者和绅士！只要Stackoverflow允许我回答（我们什么时候需要等待才能这样做？），我会给您正确的答案。 - Sorcy

不知道，我也注意到了。顺便说一句，没问题 :) - Madara's Ghost

我还不完全理解这在做什么，但它确实做到了我想要的！我将其更改为4列。 - NinjaBomb

@NinjaBomb：好的，它将搜索ul.themenboxen中所有直接子元素，这些子元素是li，并符合公式3n+1，意味着第1个（n=0），第4个（n=1），第7个（n=2）等等。 - Madara's Ghost

真是神奇。最好只说 li:nth-child(kn+1)，其中 k 等于每行的列数。 - Caleb Faruki