Susy 网格对齐有点偏离答案

【问题标题】：Susy grid alignment a bit offSusy 网格对齐有点偏离
【发布时间】：2014-12-11 06:27:07
【问题描述】：

学习 Susy，喜欢它。虽然在测试简单的东西时有一些怪癖。我正在尝试并排创建两个半宽列，中间有一些排水沟空间，之后是一个全宽列。问题是第二个半宽列 (y) 没有完全向右浮动。如果我完全删除了padding: 5px，该列仍然大约关闭1px，并且与全宽列（z）不对齐

HTML

<div class="row">
    <div class="left">x</div>
    <div class="right">y</div>
</div>

<div class="row">
    <div class="full">
        z
    </div>
</div>

萨斯

$susy: (
     global-box-sizing: border-box,
     gutters: 1/4,
     gutter-position: outside
);

.row { 
     @include container(320px); 
}

.left {
    @include span(1 of 2);
}

.right {
    @include span(1 of 2);
    @include last;
}

.full {
    @include span(2 of 2);
}

.left,
.right,
.full {
    border: solid 1px #000;
    background: #fff;
    margin-bottom: 25px;
    padding: 5px;
 }

这是输出代码的 jsfiddle：

JSFiddle

为什么没有正确对齐？

问题可能不在于 Susy 本身，而是我是否正确使用它/是否有更好的方法来做同样的事情并让它自行向右浮动？以下代码在 .right 的同一个类中输出一个 float: left 和一个 float: right，似乎没有必要。

【问题讨论】：

标签： html css susy

【解决方案1】：

唯一的问题是由于某些原因global-box-sizing: border-box 参数不起作用。

.full {
   @include span(2 of 2 border-box);
}

SassMeister

【讨论】：

global-box-sizing 参数是descriptive，而不是prescriptive。所以它实际上是这里的问题，除非你在某处应用全局盒子大小（你可以使用包含的 mixin global-box-sizing(border-box)）。