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