2

第一次发帖，请温柔对待我:)

所以我尝试使用 Susy 并排放置两个按钮，这似乎工作正常：

.fifty {
    @include span-columns(3);
    @include nth-omega(2n);
}

但是，一旦我向按钮添加 1px 边框，有效宽度就是 100%+4px，因此它会破坏布局。

我对所有按钮填充值都使用了 Compass Vertical Rhythm 插件，所以不想搞砸。

任何帮助，非常感谢。

4

1 回答 1

5

这与“ How to include padding in column width with Susy ”有关，但您的第二个选项有点不同。这个问题不是 Susy 特有的——任何流畅的布局都是如此——但是 Compass 和 Susy 可以帮助你解决第一个问题：

  1. 使用 box-sizing:border-box; - 现在所有主要浏览器都支持这一点，并且 Compass 有一个方便的 box-sizing() mixin 可以为您处理前缀。如果你在任何地方都使用它（就像我一样），它可以改变 Susy 容器的大小，但是 Susy 提供了方便的 mixin 来为你解决所有这些问题。只需在设置容器之前将其添加到根目录 - 它将设置盒子模型，并让 Susy 知道对其进行调整：

    @include border-box-sizing;

    box-sizing(border-box)或者只是在你想要的地方使用 Compass mixin（在这些按钮上）。

  2. 由于边框不采用 % 值，因此根本没有为流体元素添加边框的好方法（使用默认的内容框模型）。如果你不能使用border-box模型，唯一的其他选择是在标记中添加一个内部元素，使用外部来调整大小，使用内部来设置边框和样式。

  3. 还有第三种选择 - 使用calc()- 但它更难做到，而且浏览器支持更少......

选项 #1 是迄今为止最好的 - 只要您可以让 IE7 失去乐趣。

于 2013-06-16T17:59:31.577 回答