使浮动列表元素等于height（使用纯css） [英] Make floating list elements equal height (with pure css)

问题描述

我有一个列表的列表。子列表向左浮动。请参见 http://jsfiddle.net/P4Psf/

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

现在7和8将自己设置在5和6之下，他们实际上应该在4和5之下。

我当然可以使用javascript，但我希望有一个纯CSS解决方案（至少）在现代浏览器中工作

解决方案

将它添加到您的CSS：

  ul.themenboxen> ; li：nth-​​child（3n + 1）{
 clear：both; 
} 
  

这将以此形式搜索：

1. 查找符合：nth-​​child（3n + 1）的所有元素，表示其父元素内的每个第三个元素。


2. 只筛选 li 的


3. 只过滤那些直接后代 c>

第三个元素直接在 ul.themenboxen 里，并应用 clear：both >

注意：我不确定是否支持较低的IE。

示例

I have a list of lists. Sublists are floated left. See http://jsfiddle.net/P4Psf/

Is there a way to force these columns to be the same height as their neighbors (i.e. have Element 1, 2 and 3 equal height, then 4, 5, 6 equal height (but of course different from 1,2,3) etc. etc.)?

At the moment 7 and 8 put themselves below 5 and 6, where they actually should be below 4 and 5.

I of course could do this using javascript, but I'm hoping that there is a pure CSS solution that works in (at least) the modern browsers?

解决方案

Add this to your CSS:

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

That will literally search in this form:

1. Find all elements which match :nth-child(3n+1), meaning every third element inside its parent.
2. Filter only those who are lis.
3. Filter only those who are direct descendants of ul.themenboxen.

Or in english, find every third element directly inside of ul.themenboxen, and apply clear: both on it.

Note: I'm not sure about lower IE support.

Example

这篇关于使浮动列表元素等于height（使用纯css）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！