以混淆百分比计算网格布局答案

【问题标题】：figuring out grid layout in % confused以混淆百分比计算网格布局
【发布时间】：2014-01-02 16:57:44
【问题描述】：

我一直在尝试了解人们一直在使用的这个网格系统。有时有点让我觉得自己很笨。

我了解，如果您使用没有边距的 12 格系统。第 12 列将是 100%，而第 1 列将是大约 8.33333%。

我一直在研究一些网格系统和 onepcss 网格，我有点困惑。我知道剩下 1%，因为他/她说全宽网格是 99%。他们使用 3% 的边距，但一列是 = 到 5.5%，但如果我计算一下 100/12 = 8.33333% - 3%（边距）= 5.3333%

我在下面发布了他们的网格示例。我正在尝试使用基本数学来找出哪一列是我做错了什么？

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

【问题讨论】：

我能推荐你看看 bootstrap 3.0，它让这一切变得容易多了。更重要的是，您似乎在使用宽度作为累积数字......它不是。
网格系统不仅仅是宽度。如果您使用的系统没有浮动容器，那么 1% 可能是考虑到 inline-block 元素之间的空白，或者用于填充 container 元素。如果您想要一个明确的答案，您需要提供更多信息。

标签： html css layout grid

【解决方案1】：

在 12 列网格中，有 11 个排水沟。因此，必须从总宽度 (99%) 中减去排水沟宽度 (33%)。如果每个装订线是 3%，那么单列是：

(99 - 33) / 12 = 5.5

然后，多列是加在一起的列加上它们“吸收”的排水沟。所以三列是：

5.5 + 5.5 + 5.5 + 3 + 3 = 22.5

（三个列宽加上两个装订线宽度），视觉上：

┌─────── 22.5 ────────┐
| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5 |3| 5.5

【讨论】：