5

CSS列を使用してシームレスなレスポンシブ画像グリッドを作成するChris Coyierの例を実装しようとしています。

Chris のファイルを自分のサーバーに置いたところ、すべて問題ないように見えました。私が変更したのは実際の画像だけでした。

ここで、私のテスト ページでわかるように、指定した 5 列ではなく 4 列の画像しかありませんcolumn-count:5;。5 番目の列は内容のない単なる空白です。

これは、ブラウザ ウィンドウが 1200px より大きい場合にのみ発生します。ブラウザー ウィンドウが 1200px 未満の場合、メディア クエリが開始され、列数が 4、3、2、そして最後に 1 と減少します。つまり、このバグはcolumn-count:が 5以上の場合にのみ発生します。

これは、FF 10、Chrome 17 以降、および Safari 5 以降で発生します。

どんな助けでも大歓迎です！

トリミングされた HTML は次のとおりです。

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

変更前の CSS は次のとおりです。

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
4

3 に答える 3

1

解決策ではなく回避策ですが、答えがあります。高さ 300px と 370px になるように画像を変更しました。基本的に、画像の高さを変え、すべての画像の幅を同じ 300px に保ちました。答えは、正方形の画像を使用しないか、すべて正方形の画像を使用する場合は、5 ではなく column-count:4 を使用することです。

なぜこれが起こるのかについて、誰かがさらに洞察を提供できれば、それは素晴らしいことです.

于 2012-03-06T05:44:09.757 に答える
1

ブラウザが幅 1219 ピクセルに達すると (少なくともFiresizeが教えてくれるように)、5 つの列が表示されます。その下には 4 もあります。Firefox 10。

起こっているかもしれないいくつかのこと：

  • 垂直スクロールバーの幅は正確に 19 ピクセルです
  • Firefox ウィンドウの左右の境界線はそれぞれ 9 ピクセルで、合計 18 ピクセルになります。

これらのいずれかがメディアクエリに含まれているようです。

編集：ちょっと奇妙ですが、一見すると、W3メディアクエリサイトは次のことを示唆しているようです：

「幅」メディア機能は、出力デバイスのターゲット表示領域の幅を表します。連続メディアの場合、これは (CSS2 のセクション 9.1.1 [CSS21] で説明されているように) ビューポートの幅であり、レンダリングされたスクロール バー(存在する場合)のサイズを含みます。

于 2012-02-15T23:04:11.663 に答える