1

これは説明が難しく、説明が難しいため、問題を視覚化するためにjsfiddleを作成しました。

4つおきの要素が左にクリアされる要素のグリッドがありますclear:left。

これらのフロート要素の一部を非表示にするトグル（実際の場合はフィルター）があり、残りを上に移動して4by4グリッドを維持したいと考えています。

<div class="item"> 1 </div>
<div class="item"> 2 </div>
…

.item:nth-of-type(4n+1) { clear: left; }

この例を参照してください： http：//jsfiddle.net/K4rXM/

「やる！」をクリックしたとき リンクnth-of-typeルールは一種の無視されています。突然、すべての要素が左に浮き、4番目の要素の後に明確になりません。

これは実際、私の問題をほんの少し説明しているだけです。実際、私が持っているようなレスポンシブレイアウトでは、もう少し複雑です。

私のためのアイデアやヒントはありますか？よろしくお願いします、マット

4

1 に答える 1

2 
$('#test').click(function(e) {
e.preventDefault();
$('.item').hide();
$('.call').show();
$('.item:visible').each(function (i) {
if (i % 4 == 0) $(this).addClass('clearLeft');
});
});


.clearLeft{clear:left;}

私のコメントのように、まだ非表示の div をカウントしているため、どれが表示されているかを確認してから、クラスを適用する必要があります。 http://jsfiddle.net/calder12/K4rXM/4/

于 2012-12-09T12:29:04.910 に答える