0

おそらく不可能であることはわかっており、ドキュメントに目を通しましたが、見つかりませんでした。

これが私のシナリオです：

12 列のグリッドがあり、メイン コンテンツが左側にあり、セカンダリ コンテンツが右側にあるとします。

私はモバイル ファーストのアプローチに従っているので、デフォルトのスタイリング (モバイル) では左右の列が 100% になります。一番下がメインコンテンツで、一番下がサブコンテンツです。

次に、タブレット/デスクトップの場合、メイン コンテンツを 8 列 (左揃え) に、セカンダリ コンテンツを 4 列 (右揃え) にします。ただし、セカンダリ コンテンツ列は常に 300px 以上にする必要があります (広告のため)。

Susy でこれを行う方法はありますか?

4

1 に答える 1

1

もちろん。最も簡単な方法は、4/12 列が 300px を超える十分なスペースができるまで、ブレークポイントが発生しないようにすることです。それができない場合は、創造性を発揮する必要があります。

CSS でこれを行う唯一の方法は、被制御要素 (セカンダリ) をマークアップの最初に配置することです。ドキュメント フローの処理方法により、後の要素が前の要素に影響を与えることはできません。どのように移動するsecondaryかを制御するには、スタイルをオンにする必要があります。main

まずはsecondary思い通りに動くことです。また、ここでガターを手動で設定する必要があります。

.secondary {
  @include span-columns(4 omega);
  min-width: 300px;
  margin-left: gutter();
}

main次に、 float をラップしないように、レイアウト コンテキストを指定する必要がありますsecondary。これを行う最も簡単な方法 (いくつかの副作用があります) は、 を使用することoverflow: hiddenです。

.main {
  overflow: hidden;
}

それでおしまい。を使用できない場合はoverflow: hidden、他の方法が役立つ可能性があります。OOCSS lastUnitはこの目的を果たしますが、より多くのコードを使用します。

または、代わりに flexbox を使用することもできますが、サポートは十分ではありません。

基本的に、Susy は問題ではありません。それを行う方法はいくつかありますが、使用するシステムに関係なく、ある程度の作業が必要になります。より高いブレークポイント (または中間のブレークポイント) をお勧めします。

于 2013-10-03T06:07:41.003 に答える