DIV未通过@omega使用Susy Framework清除

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，但它在Susy1.0(我正在使用)中被弃用。我还尝试在div-3和div-5上使用@omega，没有做任何更改。

Answer 1

这就是CSS浮动的工作方式。浮点数永远不会比前一个元素(div2)对齐更高。苏西对此无能为力。

为了让这个布局起作用，你必须对你的标记进行调整--要么改变div的顺序，要么在div1和div2周围添加一个包装器(这是我推荐的保持源代码顺序的方法)。

或者，如果你想变得棘手，你可以在不浮动它们的情况下处理div3和5。如下所示(为简单起见，忽略断点)：

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

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