0

我以为我让 Susy 失望了，但现在已经为此苦苦挣扎了几个小时。我也感到非常愚蠢，因为我以前从未遇到过这个问题，所以我知道它已经结束了。可能是对盒子模型的误解，但这就是我遇到的问题。

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

无填充： 在此处输入图像描述

带填充： 在此处输入图像描述

我的 html 结构是：
.container
+ main
++ 内容（@include span(9)）
++ 边栏（@include span(last 3)）

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

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

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

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

4

2 回答 2

0

我能够通过将其增加 1 列来修复它。

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

columns: 13

问题是因为您需要额外的列的填充。

于 2015-01-30T19:29:42.373 回答
0

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

#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

于 2015-02-01T08:32:13.967 回答