对nth-child应用clearfix而没有额外的标记 [英] Applying a clearfix to nth-child without additional markup

问题描述

首先，为了更加清楚，这里是一个JS小提琴，演示我想实现的目标：

First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:

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

这里是解释 - 我的理由：

Here's the explanation - my rationale:

我正在使用1140网格框架创建一个响应式网站。
这是一个相当复杂的布局。

I'm creating a responsive site using the 1140 grid framework. It's a fairly complex layout.

我创建了一个可重用的简单图库类，可以放入任何定义的列大小。使用媒体查询，我应用相关百分比宽度到li元素。
每个li元素的右边距为5％。
我在媒体查询中使用nth-child（xn + x）删除每行结尾处的右边距。

I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements. Each of the li elements has a right margin of 5%. I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.

一切都很好 - 图像resize为布局调整大小，一行中的图库项目的数量工作，因为我已根据百分比定义。

Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.

唯一需要解决的问题是在行之间清除。
我不能添加额外的html标记，我想避免过度复杂的jquery修复。

The only remaining issue to fix is to clear between rows. I can't add additional html markup and I want to steer clear of overly complex jquery fixes.

我知道有两种方法来解决这个问题，但我不喜欢这两种方法。

I know of two ways to fix this, but I'm not keen on either of them.

首先修复，简单地使用display：inline-block在li元素上，垂直对齐顶部，将正确地流动一切... ，所有的百分比拍摄和图库项目不再整齐适合分配的空间。

First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.

第二次修复，给列表项一个高度。这是我将下去，如果必要的路线 - 它将需要一个不同的高度，根据分辨率 - 没有什么大不了，但不是整洁。

Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.

推荐答案

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

I updated your fiddle here: http://jsfiddle.net/VsH7X/5/

我添加了 clear：left 到每个新行的第一个项目。

I added a clear: left to the first item in each new row.

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

请记住：nth- / code>伪类在IE6-8或FF3和以下不工作。


Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under. ​

这篇关于对nth-child应用clearfix而没有额外的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！