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

Question

我正在尝试实现Chris Coyier的example，他使用CSS列来创建一个无缝响应的图像网格。

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

现在，正如您在我的test page上看到的，使用column-count:5;只有4列图像，而不是指定的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。因此，答案是要么不使用正方形图像，要么使用所有正方形图像，使用column-count:4而不是5。

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

Answer 2

当我的浏览器达到1219px宽(至少像Firesize告诉我的那样)时，我会得到5个协议值。在这下面我也得到了4。Firefox 10。

可能发生的一些事情：

• 我的垂直滚动条正好是19px宽
• 火狐窗口的左右边框都是9px，总共有18px的

这似乎是其中之一被包括在媒体查询中。

编辑:虽然有点奇怪，因为乍一看W3 media queries site似乎暗示：

‘width’媒体功能描述输出设备的目标显示区域的宽度。对于连续媒体，这是视区的宽度(如CSS2，第9.1.1 CSS21节所述)，包括呈现的滚动条(如果有)

的大小

Answer 3

以防其他人在他们的搜索结果中发现这一点，这是因为图像是内联的，所以它们之间有一些空格，请参见：

How can I eliminate spacing between inline elements in CSS?

我在部分中使用font-size: 0来解决这个问题:)