CSS列错误 - 5列计数仅显示4(带图像)

Question

我正在尝试实现Chris Coyier 使用CSS列创建无缝响应图像网格的示例.

我把Chris的文件放到我的服务器上,一切都很好.我唯一改变的是实际图像.

现在,正如您在我的测试页面上看到的那样,只有4列图像而不是指定的5列,使用column-count: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

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

如果有人可以进一步深入了解为什么会发生这种情况，那就太好了。