CSS响应式网格1像素间隙问题

Question

我正在为一个项目设计响应式网格系统。该网格由左浮动的块组成，其 宽度 为 25%。

这些块内有图像，它们的高度/宽度设置为 100% *或50% *。*。

所有块中的图像都挨在一起，所有块都紧贴在一起，看起来像是无缝的图像网格。

问题出现在特定的浏览器大小或调整浏览器大小时，某些块之间会出现1px的小缝隙。

可以在此处查看示例： http://dahliacreative.com/responsivegrid/ 我认为这可能是由于块浮动导致的，如果取消浮动，则一切正常。 我尝试使用 display：inline-block 等方法，但无法使其正常工作！

有人有解决方法吗？

- dahliacreative

Answer 1

这是因为使用了完整的百分比，例如50％。当你达到某些宽度和高度（例如561px * 393px）时，它们将无法均匀地分成50％，因此会留下1像素的间隙。

请查看Twitter Bootstrap CSS，以查看将百分比计算到6个小数点以避免此问题。

- Ryan McDonough

---

那么，一边必须比另一边大吗？ - dahliacreative

Answer 2

我通过为最后一列添加CSS类来解决它，这个类的CSS如下：

.your_class_for_last_column { float: left !important;} 
/* TO FIX 1px Foundation 5 bug fix*/

- xsor

Answer 3

您可以使用新的CSS3，包括列间距和列数。

column-count:
column-gap: 

Chris用图片做了一个非常好的例子，与你的相关。 你可以使用li、table或其他元素来做几乎相同的事情。 请确保使用前缀，并且不要在IE 10以下的浏览器中使用。

http://css-tricks.com/seamless-responsive-photo-grid/

- РАВИ