流体网格，没有舍入误差和多个列宽

Question

我看过所有髋关节，流体网格框架，似乎不可能有一个流体网格使用百分比作为列宽（和ems用于装订线宽度），即可被3整除，并没有遭受可怕的舍入错误。看看：

http://roestudios.com/code/12-columns.html

尝试调整浏览器窗口的大小，并注意事情是如何反弹的。大多数排水沟根本不排成一排。这是因为缺乏整齐的子像素处理。当然，舍入因浏览器而异。

我所展示的示例基于12列网格，这是理想的，因为12列网格允许的元素是页面宽度的1/4和1/3。

这就是The Golden Grid这样的东西不起作用的原因：它不能被3整除。

拥有一个全宽“主”区域的主页和下面三个“桶”是相当标准的。标准布局。

但是在尝试构建“响应式网站”时，如果我希望元素与像素完美对齐，那么带有几个@media查询的固定布局似乎是唯一真正的选择。

编辑：在Webkit中更糟糕，但即便是Firefox也不会产生像素完美的结果。

Answer 1

您是否尝试过CSS3 FlexBox？它可以在Firefox中运行，但不幸的是仍然有点跳跃和在Chrome中不是像素完美..

http://jsfiddle.net/lukem/gqsCV/3/

http://www.html5rocks.com/en/tutorials/flexbox/quick/