使浮动列表元素等于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屋！