css - CSS 网格问题

Question

这是代码示例：http: //jsfiddle.net/gubvw/3/

如果您通过在测试窗口中拖动 sizer 来缓慢更改屏幕大小，您会看到数字列分散。

我能做些什么来解决这个问题？

更新：这是为 FLUID CSS GRID 系统制作 webapps 布局的。我不想得到桌子。该示例用于在调整大小和其他维度上测试此网格。

我认为问题出在浏览器中，它将 .cx1 计算为 55+43px 并将其四舍五入为像素，
而 .cx5 计算为 449+43px 而不是注意到 .cx1 舍入为 55px。

专为 Dexter Huinda 设计的：
有 100% 的宽度吗？和 12 列，右边距为 3.8%（最后一个除外）。

So for cx1 = (1*(100+3.8))/12-3.8 = 4.85%
for cx2 = 4.85*2+3.8 = 13.5%
for cx3 = 4.85*3+3.8*2 = 22.15%
and so on.
The main formula to calculate any column width from 1 to 12 is
       (a*(100+b))/12-b (where a = number of spanned columns and b is margin)

有什么数学问题吗？

问题是为什么：width(4.85%+3.8%+4.85%+3.8%+4.85%) <> width(22.15%)

因此，如果您无需解释，请在任何 .cx 宽度中查找错误。你可以吗？

Answer 1

您应该使用可以在 css 文件中提供的具有固定宽度的 div，或者您可以通过 table.xml 来制作它。实际上，您的 div 没有正确拧紧在一起。这是主要原因。

Answer 2

我认为您的方法可以进行一些重新思考。

如果您需要对齐列，请使用表格或使用固定宽度的 div。您正在使用类，所以为什么不通过类应用固定宽度，而不是那里的百分比宽度。

结合使用固定宽度的字体也可以产生预期的效果。

Answer 3

解决方案在这里：http: //jsfiddle.net/NwkPz/。
感谢 Vasiliy Aksyonov（Web 标准日）和 Vadim Makeev（Opera 软件）

))