0

私は単純な .isotope ギャラリーを作成してきました。これは、chrome 開発ツールで選択した #portfolio-wrap コンテナーでどのように見えるかです。

3 つのリンクをアップロードできなかったので、ここに戻る必要があります:
--> ギャラリー - 画像 1 を確認 <--

すべての .isotope オブジェクト (テキスト付きの円) には

margin: 0 10px 0 10px;

画面のように:

--> 画像 2 を今すぐチェック <--

4 つのオブジェクトが並んでいます。私が欲しいのは、1 番目と 4 番目のアイテムの左右に余白がないようにして、すべてが親本体コンテナーの「壁」にくっつくようにすることです。 編集:
すべてのアイテムは 20px の下余白を持つ必要があり、1,5,9 を除くすべてのアイテム、つまり 4n+1 も 20px の左余白を持つ必要があります。したがって、それらはうまく積み重ねられます。画像

だから私は試してみましたnth-child：

#portfolio-wrap > div:nth-child(4n+1)  {
    margin: 0 0 20px 0;
}

しかし、下に見られるように、それは同位体の行動をバギーにします。赤い数字は、フィルタリングなしのコードに従って表示されるはずの連続した子の数字です。

--> 画像 3 を今すぐチェック <--

1 番目と 5 番目の子には、マージンが適切に適用されます。そして、2つのことではないにしても、すべてがうまくいくでしょう:

  1. フィルタリング後、適用されたマージンは変化しません。
  2. 最後のimgurリンクのように、位置のバグ。

広告。1 1
つの問題に対する js ソリューションを見つけましたが、部分的に機能します: Stackoverflow - 4n+1 コードを適用すると機能しません。（私は本当にjsが得意ではありません）

var x=0;
$('.portfolio-item:not(.isotope-hidden)').each(function(){
     for (x=4*x+1; x<=50; x++ ) { 
        $(this).css('margin','0 0 20px 0') 
     } else {
        $(this).css('margin','0 0 20px 20px')
     }
})

広告。2
整列バグの原因がわかりません。ラッパーを破壊するマージンが多すぎるのではないかと思いましたが、そうではありません。

みんなのアップデート：

私は自分のjsを修正しましたが、うまくいきます!:

$('.portfolio-item:not(.isotope-hidden)').each(function()) {
        for (x = 1; x <= 50; ++x) { 
        if ((x - 1) % 4 == 0) {
            $(this).css('margin','0 0 20px 0') 
        } else { 
                $(this).css('margin','0 0 20px 20px')  
        } 
    }}

レイアウトのバグは、画像 3 のようにまだバグが発生しています!

また、フィルタリング後のjsは新しいマージンを適用していません... :(

更新 2:

gutterWidth (同位体のマニュアルを参照) を適用することで問題を解決しました。また、gutterwidth を適用するだけでなく、ソースからの gutterwidth のデモからのコードの長いスタックも必要です。同位体のドキュメントに恥をかかせます。

4

1 に答える 1

1

4 つの要素の各行の最初と 4 番目の子要素をターゲットにするには、最初の要素を左マージンなしで、4 番目の要素を右マージンなしで残して、次のルールを使用する必要があります (質問で言及したクラスに基づいて....)

#portfolio-wrap > div:nth-child(4n+1)  {
    margin-left: 0px;

}
#portfolio-wrap > div:nth-child(4n+4)  {
    margin-right: 0px;
}

壊れたレイアウト

コードを確認しないとわかりません。しかし、#5 は右に浮いているように見えます。#3 は自分の居場所を見つけることができず、浮いている要素で発生するはずのようにダウンします。20px の下余白を使用している #1 の後に配置されるため、コンテナーの左には到達しません。最後に、#4 は #3 の下の場所を見つけ、コンテナの左側に到達できます。したがって、表示されるのは、視覚的な書式設定モデルが示すように、予想されるレイアウトです。

JavaScript 関数

そこも見てください。elseステートメントはifの後に続く必要があります。

于 2013-05-16T17:07:34.287 に答える