：第n个孩子和无限滚动

在一个site I'm creating，我们有一个项目的网格，所有的行浮动，因为CSS的这个小片段的正确：：第n个孩子和无限滚动

.collection .grid-item:nth-child(3n+1){ clear: left; }

这使得每行中的第一项clear:left，这允许新行开始于最高行的高度结束的位置。

这个效果很好。

但是，当我尝试添加无限滚动它打破了网格。无限滚动将两个项目display:none项添加到网格，分页和加载栏。

由于某种原因，clear:left的css正在识别这两个元素，并在加载到网格的每个页面的网格中创建两个间隙。

有关如何解决此问题的任何想法？

来源

2013-12-12 ThomasReggi

我有这个完全相同的问题。我必须使用jQuery来计算'可见'项目，然后在该计数中每4个添加一个类来清除它。这是我问的问题：http://stackoverflow.com/questions/20557240/visible-not-working-with-nth-child-selector和解决方案gilly3给了我：http://jsbin.com/OVewUkaM/2/编辑 – davidpauljunior

:nth-child将同等对待每个.grid-item的子元素，因此您的分页和加载栏符合条件。尝试在.grid-item之外移动您的寻呼机和加载器。

来源

2013-12-12 23:10:06 WayneDenier

我没有意识到它选择了该选择器内的孩子。 '.grid-item'是我希望单独选择的网格内项目的选择器。如果我不能移动这些项目怎么办？有什么方法可以选择这些项目？忽略那些我不想加入的人。 – ThomasReggi

它不会选择与'.grid-item'不匹配的项目，因此样式不会应用于这些项目。但是，这些项目仍然会影响其周围项目的_index_（它不仅限制匹配用于索引的选择器的项目）。 – WayneDenier

：第n个孩子和无限滚动

回答

相关问题