0

Susy を使用して、マークアップの順序とは異なる順序でレイアウトを作成することはできますか?

私のマークアップは次のようになります。

<div id="container">
  <div id="content"></div>
  <div id="sidebar1"></div>
  <div id="sidebar2"></div>
</div>

このマークアップは、直線的な形式 (コンテンツ、サイドバー、サイドバー) で表示されるモバイルに最も適しています。

デスクトップですが、サイドバー、コンテンツ、サイドバーを提示したいと思います。

私の $susy マップは次のとおりです。

$susy: (
  container: 1200px,
  columns: 12,
  global-box-sizing: border-box
);

私はもう試した

#content{
  @include span(7 at 4 of 12);
}
#sidebar1{
  @include span(3 first);
}
#sidebar2{
  @include span(2 last);
}

と

#content{
  @include span(7 at 4 of 12);
}
#sidebar1{
  @include span(3 at 1 of 12);
}
#sidebar2{
  @include span(2 at 10 of 12);
}
4

1 に答える 1

1

float アイソレーション (isolateキーワードを使用) を使用しない限り、場所 ( first、last、at 10など) を渡すとガターと最後のフローにのみ影響します。隔離することで、欲しいものを手に入れることができます。これを試して：

#content{
  @include span(7 at 4 of 12 isolate);
}
#sidebar1{
  @include span(3 first isolate);
}
#sidebar2{
  @include span(2 last isolate);
}

分離の詳細については、 docs を参照してください。

于 2015-01-07T18:20:02.613 に答える