DIV没有使用Susy Framework与@omega进行清算

Question

我正在尝试使用Susy Compass框架将2个div向右移动并且有一个清除问题：

<div class="div-1">
  <h2>DIV 1</h2>
</div><!--end div-1-->

<div class="div-2">
  <h2>DIV2</h2>
</div><!--end div-2-->

<div class="div-3">
  <h2>DIV 3</h2>
</div><!--end div-3-->

<div class="div-4">
  <h2>DIV 4</h2>
</div><!--end div-4-->

<div class="div-5">
  <h2>DIV 5</div>
</div><!--end div-5-->

这是我的Susy布局代码：

#detail{

    .div-1{
        @include breakpoint($breakpoint-md){
            @include span-columns(7, 12);
            @include pre(1);
            background-color:pink;
        }
    }

    .div-2{
        @include breakpoint($breakpoint-md){
            @include span-columns(7,12);
            @include pre(1);
        }
    }

    .div-3{
        @include breakpoint($breakpoint-md){
            @include span-columns(7,12);
            @include pre(1);
        }
    }

    .div-4{
        @include breakpoint($breakpoint-md){
            @include span-columns(3,12);
            @include suffix(1);
            //@include omega;
            background-color:blue;
        }
    }

    .div-5{
        @include breakpoint($breakpoint-md){
            @include span-columns(3,12);
            @include post(1);
            //@include omega;
            background-color:orange;
        }
    }
}

举一个如何渲染的例子，下面是截图：

如您所见，div-3和div-5未清除到顶部，与div-1对齐。

我想也许我可以使用@alpha mixin，但它在Susy 1.0中被弃用（我正在使用）。我也尝试在@omega和div-3上使用div-5而不做任何更改。

Answer 1

这就是CSS浮动的工作方式。 float永远不会对齐任何高于前一个元素（div2）。 Susy对此无能为力。

您必须对标记进行调整才能使此布局正常工作 - 切换div的顺序，或者在div 1和amp; 1之间添加包装器。 2（我建议保留源订单）。

或者，如果你想变得棘手，你可以处理div 3＆amp; 5没有漂浮他们。这样的事情（为简单起见忽略了断点）：

.div3, .div5 {
  @include pre(8);
  @include suffix(1);
}

这应该将它们推向右边，同时忽略浮动的div 1,2和4。