0

SusyCompassフレームワークを使用して2divを右にフロートさせようとしていますが、クリアの問題があります。

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

そして、これが私のスージーレイアウトコードです：

#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-5div-1

おそらくミックスインを使用できると思い@alphaましたが、Susy 1.0（私が使用している）では非推奨になっています。私もそのまま使ってみまし@omegaた。div-3div-5

4

1 に答える 1

1

それが CSS フロートの仕組みです。float は、前の要素 (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 に答える