CSS列错误 - 5列计数仅显示4（带有图像）

Question

我正在尝试实施克里斯·科伊尔（Chris Coyier）的 例子 使用CSS列创建图像的无缝响应网格。

我将克里斯的文件放在服务器上，一切看起来都很好。我唯一更改的是实际图像。

现在，正如你在我身上看到的那样 测试页面, ，只有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

好的，我有一个答案，尽管这是解决方法，而不是解决方案。我更改了图像，以使一些高度为300px，而另一些则为370px。基本上，我改变了图像的高度，并保持所有图像的宽度相同，300px。因此，答案是不使用正方形图像，或者如果要使用所有正方形图像，请使用列计数：4而不是5。

如果有人可以进一步了解为什么会发生这种情况的原因。

Answer 2

当我的浏览器达到1219 PX宽时（至少为 开火 告诉我）我得到了5个上校。在下面我也有4个。 Firefox 10。

可能发生的一些事情：

• 我的垂直滚动栏正好是19 px宽
• Firefox窗口的左右边框每个是9 px，总计18px

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

---

编辑：有点奇怪，因为乍一看 W3媒体查询网站 似乎暗示了：

“宽度”介质功能描述了输出设备的目标显示区域的宽度。对于连续介质，这是视口的宽度（如CSS2所述，第9.1.1节[CSS21]） 包括渲染滚动条的大小 （如果有）

Answer 3

万一其他人在他们的搜索结果中找到了这一点，这就是图像是内联的事实，因此他们之间有一些空间：

如何消除CSS中的内联元素之间的间距？

我使用字体大小：0在本节上进行修复:)