2013-12-12 48 views
1

在一個site I'm creating,我們有一個項目的網格,所有的行浮動,因爲CSS的這個小片段的正確::第n個孩子和無限滾動

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

這使得每行中的第一項clear:left,這允許新行開始於最高行的高度結束的位置。

這個效果很好。

但是,當我嘗試添加無限滾動它打破了網格。無限滾動將兩個項目display:none項添加到網格,分頁和加載欄。

由於某種原因,clear:left的css正在識別這兩個元素,並在加載到網格的每個頁面的網格中創建兩個間隙。

有關如何解決此問題的任何想法?

+0

我有這個完全相同的問題。我必須使用jQuery來計算'可見'項目,然後在該計數中每4個添加一個類來清除它。這是我問的問題:http://stackoverflow.com/questions/20557240/visible-not-working-with-nth-child-selector和解決方案gilly3給了我:http://jsbin.com/OVewUkaM/2/編輯 – davidpauljunior

回答

2

:nth-child將同等對待每個.grid-item的子元素,因此您的分頁和加載欄符合條件。嘗試在.grid-item之外移動您的尋呼機和加載器。

+0

我沒有意識到它選擇了該選擇器內的孩子。 '.grid-item'是我希望單獨選擇的網格內項目的選擇器。如果我不能移動這些項目怎麼辦?有什麼方法可以選擇這些項目?忽略那些我不想加入的人。 – ThomasReggi

+0

它不會選擇與'.grid-item'不匹配的項目,因此樣式不會應用於這些項目。但是,這些項目仍然會影響其周圍項目的_index_(它不僅限制匹配用於索引的選擇器的項目)。 – WayneDenier