html - :nth-child and infinite scroll

Question

在 site I'm creating 上由于这个 CSS 小片段，我们有一个元素网格并且所有行都正确 float :


.collection.grid-item:nth-child(3n+1){
清除:离开；
}


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

这非常有效。

但是，当我尝试添加无限滚动时，它破坏了网格。无限滚动正在向网格、分页和加载栏添加两项 display:none 项。

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

关于如何解决这个问题有什么想法吗？

Answer 1

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