0

私のサイトでは、多くの Susy レイアウトが正常に機能しています。ボディ全体の左側に 2 列のサイド バーがあり、その後に 2 つの 5 列のセクションが続くものを追加しようとしています。これはコードです：

CSS

$total-columns  : 12;         // a 12-column grid
$column-width   : 3.5em;      // each column is 4em wide
$gutter-width   : 1em;        // 1em gutters between columns
$grid-padding   : 0;          // grid-padding equal to gutters

@include border-box-sizing; // Part of Susy

.side-bar {  @include span-columns(2,12);  border-right: 2px solid $darkRed;}
.body-title {  @include span-columns(10 omega,12);}
.body-double-column
{
    @include span-columns( 10 omega, 12);
     column-count: 2;
}
.body-left-column { @include span-columns( 5, 12);}
.body-right-column {  @include span-columns( 5 omega, 12);}

HTML

    <div id="bounding-box">
        <div class="side-bar">
        </div> <!-- /side-bar -->
        <section class="body-title">
        </section>
        <section class="body-left-column">
        </section>
        <section class="body-right-column">
        </section>
        <div class="push"></div>
    </div> <!-- /bounding-box -->

body-left-column と body-right-column のレイアウトは、body-title セクションに十分なテキストがなく、サイドバーの垂直方向の長さより下に押し込まれない限り問題ありません。ある場合は、ページの左側にフロートします。.body-column-double を使用するページでは、この問題は発生しません。生成された css を考えると、この動作は正常に見えます。クラス .body-left-column には float:left があります。また、Susyサイトのサンプルページのように、左右をそれぞれ5、10、5オメガ、10にすると、横に並べられないほど大きくなってしまいます。すべてが左に浮かないようにするには、隠しテキストなどでサイドバーを拡張する必要があるようです。これはそれにアプローチする方法ですか、それともより良い解決策がありますか?

4

2 に答える 2

1

border-boxモデルを使用していない限り、susy グリッド要素に境界線を追加することはできません。境界線を削除するか、 を に変更するbox-sizingとborder-box、すべて元の位置に戻ることがわかります。Susy には、border-box-sizingすべての要素のモデルを変更する mixin があります。

別のオプションは次のようなものです。

.side-bar {
  @include span-columns(2,12);
  margin-right: -100%;
  border-right: 2px solid red;
}

.body-left-column {
  @include span-columns( 5, 12);
  @include pre(2);
}

clear負の margin-right は、基本的にサイドバーをフローから削除します (ただし、 とは異なり、プロパティでクリアできますposition: absolute)。次に、preを追加left-marginしてbody-left-column、エリア外に留まることを確認しますside-bar。これは、サイドバーの下に落ちないことも意味します。

于 2013-10-06T20:01:28.577 に答える