Question

我一直在努力了解人们一直在使用的网格系统。有时会让我感到愚蠢。

据我所知，如果你使用没有边距的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; }

Answer 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

找出％confused中的网格布局

1 个答案: