0

以下のコードを使用して、コンテナーの幅の違いに基づいて、画像の配置を 5 列から 4 列、次に 2 列に調整します。

最初の例では、5 つおきの画像 (各行の最後の画像) が正しく設定され、右余白がなくなります。それぞれの画像を 4 枚に縮小すると、4 番目の画像ごとに右マージンがなくなりますが、何らかの理由で 5 番目の画像にも右マージンがなくなります。さらに、各行の 2 つの画像にスナップすると、5 番目にはまだ右マージンがありません。

それが起こらないようにするには、何を変更する必要がありますか? 事前に助けてくれてありがとう。

@media (max-width: 1200px) {
  #photos img {
  /* 5 images wide */
  width: 18% ; margin: 0 2.5% 2.5% 0;
  }
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}

@media (max-width: 800px) {
  #photos img {
  /* 4 images wide */
  width: 22% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(4n) { margin: 0 0 4% 0; }
}

@media (max-width: 400px) {
  #photos img {
  /* 2 images wide */
  width: 48% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(2n) { margin: 0 0 4% 0; }
}

編集：これはJSFiddleです-以下にリストされているメディアクエリをもう1つ追加しましたが、問題は同じです。

4

1 に答える 1

2

max-width:1200px に定義したプロパティは、max-width:800px と 400px の両方に使用されます。

あなたはあなたを再定義する必要があります:nth-child(5n)

@media (max-width: 800px) {
  #photos img {
  /* 4 images wide */
  width: 22% ; margin: 0 4% 4% 0;
  }
  #photos img:nth-child(5n) { margin: 0 4% 4% 0; }
  #photos img:nth-child(4n) { margin: 0 0 4% 0; }
}

おそらく、クエリで最小幅を定義する方が良いでしょう

@media (min-width:800px) and (max-width: 1200px) {
  #photos img:nth-child(5n) { margin: 0 0 2.5% 0; }
}

したがって、画面サイズが 1200 から 800 の間の場合、マージンが適用されます。

于 2012-09-10T11:21:31.057 に答える