CSS 列错误 — 5 列计数仅显示 4(带图像) [英] CSS columns bug — 5 column count only showing 4 (with images)

问题描述

我正在尝试实施 Chris Coyier 的 example 使用 CSS 列来创建无缝的响应式图像网格.

I am trying to implement Chris Coyier's example of using CSS columns to create a seamless responsive grid of images.

我将 Chris 的文件放到了我的服务器上，一切看起来都很好.我唯一改变的是实际图像.

I put Chris's files onto my server and everything looked fine. The only thing I changed was the actual images.

现在，正如您在我的测试页上看到的，有使用 column-count:5; 只有 4 列图像而不是指定的 5 列.第五列只是空白，没有内容.

Now, as you see on my test page, there are only 4 columns of images instead of the specified 5, using column-count:5;. The fifth column is just whitespace with no content.

这仅在浏览器窗口大于 1200 像素时发生.当浏览器窗口小于 1200px 时，媒体查询开始并减少列数 4、3、2，最后是 1.换句话说，这个错误只发生在 column-count:5 岁及以上

This only happens when the browser window is greater than 1200px. When the browser window is less than 1200px, the media queries kick in and decreases the column count 4, 3, 2, and finally 1. In other words, this bug only happens when the column-count: is 5 and up

这种情况发生在 FF 10、Chrome 17+ 和 Safari 5+ 中.

This happens in FF 10, Chrome 17+, and Safari 5+.

任何帮助将不胜感激！

这是修剪后的 HTML:

Here is the trimmed 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:

Here is the untouched 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;
  }
}

推荐答案

好的，我有一个答案，尽管它是一种解决方法，而不是解决方法.我改变了图像，使一些高度为 300 像素，其他为 370 像素.基本上我改变了图像的高度并保持所有图像的宽度相同，300px.所以答案是要么不使用方形图像，要么如果你想使用所有方形图像，使用 column-count:4 而不是 5.

Ok I have an answer, although it is a workaround, not a fix. I changed up the images so that some were 300px in height and others, 370px. Basically I varied the the height of the images and kept the width of all the images the same, 300px. So the answer is to either not use square images, or if you want to use all square images, use column-count:4 instead of 5.

如果有人能进一步了解为什么会发生这种情况，那就太好了.

If anyone can provide further insight into why this happens that would be great.

这篇关于CSS 列错误 — 5 列计数仅显示 4(带图像)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！