css - Div 转到 susy 网格系统中的新行，而不是在一行中

Question

我想用 susy 制作一个 12 列的页面，其中包含 3 个等距居中的 div，但是当我这样做时

HTML：

<div id='container'>
   <div class='col-1'></div>
   <div class='col-2'></div>
   <div class='col-3'></div>
</div>

萨斯：

#container{
   @include container(80%);
   @include layout(12);

   .col-1{ background:red; }
   .col-2{ background:blue; }
   .col-3{ background:green; }

   .col-1,.col-2,.col-3{
       @include span(1 of 3);
       height:100px;
   }
}

第 3 个 div 像这张图片一样换行，但我希望它们在一行中。

在我的 CSS 文件中有：

#container .col-1, #container .col-2, #container .col-3 {
   width: 28.57143%;
   float: left;
   margin-right: 7.14286%;
   height: 100px;
}

更新： 如果我的计算正确 3*28.57143 + 7.14286*3 != 100 ，它大约是 107 ，但为什么呢？

28.57143 是每个 div 的宽度，7.14286 是右边距的百分比

Answer 1

我想出了我之前必须为 susy 网格系统实现设置的解决方案。

  $susy: (
    container: auto,
    columns: 12,
    gutters: .25,
    gutter-position: inside,
    math: fluid,
    output: isolate,
);