Question

学习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

为什么它不能正确对齐？

这个问题可能与Susy本身无关，但我是否正确使用它/是否有更好的方法做同样的事情并让它自己浮动到右边？下面的代码在.right的同一个类中输出一个float：left和float：right，似乎没必要。

Answer 1

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

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

SassMeister

Susy网格对齐有点偏

JSFiddle

1 个答案: