0

学习苏西，喜欢它。虽然在测试简单的东西时有一些怪癖。我正在尝试并排创建两个半宽列，中间有一些排水沟空间，之后是一个全宽列。问题是第二个半宽列 (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，似乎没有必要。

4

1 回答 1

1

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

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

萨斯迈斯特

于 2014-12-11T08:23:56.120 回答