0

Susy がダウンしたと思ったのですが、これで数時間苦労しています。これまでこの問題を経験したことがないので、私も信じられないほど愚かだと感じています。おそらくボックスモデルの誤解ですが、私が困っているのはここです。

コンテナ div を設定しました。その中に、コンテンツ用に 9 列の #main div と 3 列のサイドバーがあります。#main div の背景は白いので、周囲にパディングが必要ですが、パディングを追加するとレイアウトが崩れ、サイドバーが下に押し込まれます。

パディングなし: ここに画像の説明を入力

パディングあり: ここに画像の説明を入力

私のhtml構造は次のとおりです。
コンテナ
+メイン
++コンテンツ（@include span（9））
++サイドバー（@include span（last 3））

また、html と susy 設定の両方でグローバルにボーダー ボックスのサイズ設定を設定しています。width: 100% と box-sizing: content-box を #main div に追加すると、これは機能しますが、コンテナーの右側が広くなり、その上下の要素を押しのけます。それに追加します。これはある意味では機能しますが、私の望ましい結果ではありません。#main div を同じ幅のままにする必要がありますが、左右にパディングを追加できるようにします。

私が言ったように、これは私にとって新しい問題です。私は Susy でいくつかのサイトを構築しましたが、これまでこの問題に遭遇したことはありませんでした。

更新 1: コンテンツ div とサイドバー div にパディングを追加すると機能しますが、私のページの 1 つで同じことを行うコンテンツ div に画像ギャラリーがあり、行の 3 番目の項目が一番下に落ちます。

更新 2: 一日中考えて取り組んだ結果、列幅が固定された固定サイトであることに関係しているという結論に達しました。固定幅のコンテナでもdivの幅を%で設定するとレイアウトが崩れません。面白い。「静的な」数学出力を使用して Susy をそのように動作させる方法があるかもしれませんが、私にはわかりません。

4

2 に答える 2

0

もう1列増やすことで修正できました。

http://codepen.io/anon/pen/RNZOQL

columns: 13

問題は、追加の列が必要なパディングが原因でした。

于 2015-01-30T19:29:42.373 に答える
0

次のように、列に追加します。

#content {
  @include span(9 of 12);
  padding: 20px 0 20px 20px;
}

#sidebar {
  @include span(last 3 of 12);
  padding: 20px 20px 20px 0;
}

ここで動作しています：

http://codepen.io/yivi/pen/BywygG

そしてここで流動的な数学を使って: http://codepen.io/yivi/pen/jEGEjj

于 2015-02-01T08:32:13.967 に答える