0

我正在尝试使用 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.

我想也许我可以使用@alphamixin，但它在 Susy 1.0（我正在使用）中已被弃用。我也尝试过使用@omegaondiv-3并且div-5没有任何变化。

4

1 回答 1

1

这就是 CSS 浮动的工作原理。浮点数永远不会对齐到比前一个元素（div2）更高的位置。苏西对此无能为力。

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

或者，如果你想变得棘手，你可以处理 div 3 和 5 而不浮动它们。像这样的东西（为简单起见忽略断点）：

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

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

于 2012-09-13T20:16:04.680 回答