我正在为一个项目开发响应式网格系统。网格由向左浮动且宽度为25%的块组成。
这些块内部是设置为100% *高度/宽度* 或50% *高度/宽度* 的图像。
块中的所有图像彼此相邻，并且所有块彼此相邻，因此它看起来像一个无缝的图像网格。
我遇到的问题是在某些浏览器大小下，或者当您调整浏览器大小时，某些块之间会出现 1px 的间隙。
可以在这里看到一个例子：http: //dahliacreative.com/responsivegrid/
我认为这可能取决于漂浮的方块，好像你把漂浮物取下来看起来都很好。我尝试使用display: inline-blocketc，但无法正常工作！
有没有人有解决这个问题的想法？
这是由于使用了整轮百分比，例如 50%，当您达到某些宽度和高度（例如 561px * 393px）时，这些百分比不会均匀地分成 50%，因此剩下的 1px 间隙。
查看 twitter bootstrap CSS 以查看百分比精确到小数点后 6 位以避免此问题。
我通过将 css 类添加到最后一列来修复它，这个类的 css
.your_class_for_last_column { float: left !important;}
/* TO FIX 1px Foundation 5 bug fix*/
您可以将新的 css3 与列间隙和列数一起使用。
column-count:
column-gap:
克里斯用图像做了一个很好的例子，这与你的有关。您可以对 li 或 table 等元素执行几乎相同的操作 确保使用前缀并且在 IE 小于 10 时不起作用