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>

SASS：

#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以picture的形式转到新行，但我想将它们放在一行中。

在我的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,
);

Div转到sass网格系统中的新行，而不是单行

1 个答案: