CSS响应网格1px间隙问题答案

【问题标题】：CSS Responsive grid 1px gap issueCSS响应网格1px间隙问题
【发布时间】：2012-09-29 14:47:21
【问题描述】：

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

在这些块内是设置为 100% *height/width* 或 50% *height 的图像/宽度*.

块中的所有图像彼此相邻，并且所有块彼此相邻，因此看起来像一个无缝的图像网格。

我遇到的问题是在某些浏览器尺寸下，或者当您调整浏览器大小时，某些块之间会出现 1 像素的间隙。

我认为这可能取决于漂浮的方块，好像你把漂浮物取下来似乎一切都很好。我尝试使用display: inline-block 等，但无法正常工作！

有没有人想办法解决这个问题？

【问题讨论】：

【解决方案1】：

我通过在最后一列添加 css 类来修复它，这个类的 css

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

【讨论】：

【解决方案2】：

您可以使用带有列间距和列数的新 css3。

column-count:
column-gap:

克里斯用图像做了一个很好的例子，这与你的有关。你可以用 li 或 table 等元素做几乎同样的事情确保使用前缀，并且在 IE 小于 10 时不起作用

【讨论】：

【解决方案3】：

这是由于使用了完整的圆形百分比，例如 50%，当您达到某些宽度和高度（例如 561px * 393px）时，它们不会均匀地分成 50%，因此剩下 1px 的间隙。

查看 twitter bootstrap CSS 以查看百分比精确到小数点后 6 位以避免此问题。

【讨论】：