CSS列のバグ - 5列のカウントは4（画像付き）のみを示しています

Question

私はクリス・コイヤーズを実装しようとしています 例 CSS列を使用して、画像のシームレスなレスポンシブグリッドを作成します。

クリスのファイルをサーバーに入れましたが、すべてがうまく見えました。私が変更した唯一のことは、実際の画像でした。

今、あなたが私に見るように テストページ, 、指定された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;
  }
}

Answer 1

答えがありますが、それは回避策であり、修正ではありません。画像を変更して、高さが300px、他のもの、370pxになりました。基本的に、私は画像の高さを変化させ、すべての画像の幅を同じ、300pxに保ちました。したがって、答えは、正方形の画像を使用しないか、すべての正方形の画像を使用する場合は、5の代わりに列 - カウント：4を使用します。

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

Answer 2

私のブラウザが1219 px幅にヒットしたとき（少なくともとして 暖炉 教えてください）私は5つのコルを手に入れます。それ以下では4つも取得します。 Firefox 10。

起こっている可能性のあるいくつかのこと：

• 私の垂直スクロールバーの幅はちょうど19pxです
• Firefoxウィンドウの左右の境界線はそれぞれ9 pxで、合計18px

これらの1つがメディアクエリに含まれているように思われます。

---

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

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

Answer 3

他の誰かが検索結果でこれを見つけた場合に備えて、それは画像がインラインであるという事実であるため、それらの間にいくつかのスペースがあります。

CSSのインライン要素間の間隔を削除するにはどうすればよいですか？

私はこれを修正するためにセクションでフォントサイズ：0を使用します:)