应用clearfix到第n个孩子,无需额外的标记(Applying a clearfix to nt

2019-07-31 22:23发布

首先是,极端清晰,这里是JS提琴证明什么,我想要实现:

http://jsfiddle.net/bb_matt/VsH7X/

这里的解释 - 我的理由:

我创建使用1140的电网骨架为自适应网站。 这是一个相当复杂的布局。

我已经创建了可以拖放到任意定义的列大小和使用媒体查询可重复使用的简单的画廊类,我申请相关百分比宽度为li元素。 每个li元素的具有5%的右边距。 我使用的第n个孩子(XN + x)将媒体查询每行年底将右边距。

一切正常 - 图像调整尺寸,布局调整大小,因为我已经基于百分比定义的连续工作库项目的数量。

唯一遗留的问题解决是行之间清除。 我不能添加额外的HTML标记,我想避开过于复杂的jQuery修复。

我知道的两种方式来解决这个问题,但我并不热衷于任何一方的。

首先修复,只需使用显示:在li元素inline-block的,与顶级的垂直对齐,将流动一切正常...... 但是 ,所有百分比被枪杀和库项目不再完全适合于分配的空间。

其次修复,给列表项的高度。 这是必要时我也会走的路线 - 它需要根据分辨率不同的高度 - 没什么大不了的,但不能作为整洁。

Answer 1:

我在这里更新您的提琴: http://jsfiddle.net/VsH7X/5/

我加了clear: left每一个新行中的第一个项目。

ul.gallery li:nth-child(5n+6) {
  clear: left;
}

请记住,在:nth-child伪类不IE6-8,或FF3和下工作。



文章来源: Applying a clearfix to nth-child without additional markup