Question

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

我把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

当我的浏览器达到1219像素宽（至少Firesize告诉我）时，我得到5列。在下面我也得到4。 Firefox 10。

可能会发生的一些事情：

我的垂直滚动条正好是19像素宽
Firefox窗口左右边框各9 px，总计18px

似乎其中一个被包含在媒体查询中。

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

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

Answer 2

好的我有一个答案，虽然这是一种解决方法，而不是修复。我改变了图像，使一些高度为300px，其他为370px。基本上我改变了图像的高度，并保持所有图像的宽度相同，300px。所以答案是不使用方形图像，或者如果要使用所有方形图像，请使用列数：4而不是5。

如果有人能够进一步了解为什么会发生这种情况会很棒。

Answer 3

万一其他人在搜索结果中发现这一点，事实上图像是内嵌的，所以他们之间有一些空间看：

How can I eliminate spacing between inline elements in CSS?

我在该部分使用font-size：0来解决此问题：）

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

3 个答案: