5

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

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

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

这只发生在浏览器窗口大于 1200 像素时。当浏览器窗口小于 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;
  }
}
4

3 回答 3

1

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

可能发生的一些事情：

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

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

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

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

于 2012-02-15T23:04:11.663 回答
1

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

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

于 2012-03-06T05:44:09.757 回答
0

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

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

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

于 2014-09-30T07:29:29.453 回答