向两侧添加填充会破坏布局

Question

我以为我把 Susy 弄坏了，但现在已经为此苦苦挣扎了几个小时。我也觉得非常愚蠢，因为我以前从未遇到过这个问题，所以我知道这是我的问题。可能是对盒子模型的误解，但这就是我遇到的麻烦。

我设置了我的容器 div，其中有一个 #main div，其中包含 9 列内容和一个 3 列侧边栏。 #main div 有一个白色背景，所以我需要在它周围填充一些填充物，但每当我添加填充物时，布局就会中断，侧边栏会被推到底部。

无填充：

有填充：

我的html结构是：
.容器
+ 主要
++ 内容 ( @include span(9) )
++侧边栏（@include span（last 3））

我还在 html 和 susy 设置中全局设置了 border box-sizing。如果我将 width: 100% 和 box-sizing: content-box 添加到 #main div，这是可行的，但会使容器在右侧更宽，将其推过上方和下方的元素，我理解因为内容框添加到它。这在某种意义上是有效的，但不是我想要的结果。我需要 #main div 保持相同的宽度，但允许我在左侧和右侧添加填充。

正如我所说，这对我来说是一个新问题。我用 Susy 建立了几个站点，以前没有遇到过这个问题，所以我觉得非常愚蠢。

更新 1：向内容和边栏添加填充 div 有效，除了在我的一个页面上，我在内容 div 中有一个图片库，它做同样的事情，第三项在行下降到底部。

更新 2：经过一整天的思考和研究，我得出的结论是，这与它是一个具有固定列宽的固定站点有关。当 div 的宽度设置为 % 时，即使使用固定宽度的容器，布局也不会中断。有趣的。也许有一种方法可以使用 'static' 数学输出让 Susy 像那样工作，我不确定。

Answer 1

我可以通过增加 1 列来修复它。

http://codepen.io/anon/pen/RNZOQL

columns: 13

这个问题是因为你需要额外的列的填充。

Answer 2

将其添加到您的专栏中，如下所示：

#content {
  @include span(9 of 12);
  padding: 20px 0 20px 20px;
}

#sidebar {
  @include span(last 3 of 12);
  padding: 20px 20px 20px 0;
}

在这里你可以使用它：

http://codepen.io/yivi/pen/BywygG

这里是流体数学： http://codepen.io/yivi/pen/jEGEjj

向两侧添加填充会破坏布局

Adding Padding to the sides keeps breaking layout

susy-compass

susy