2

シュリンクラップされた左側のバーと流動的なメインパネルを備えたデザインを実装しようとしています。これにより、水平スクロールバーなしで、ウィンドウの幅に合わせてできるだけ多くの画像を表示できます。

私はこれを行うのに大きな問題を抱えています。コントロール バーをフロート:左に移動すると、メイン パネルのコンテンツがその周りを流れ始めます。メイン パネルもフローティングにすると解決しますが、コンテンツがシュリンク ラップされるため、画像が 1 列に並ぶ傾向があります。

これを行うためのエレガントなソリューションはありますか?

ここで問題のモックアップを作成しました: http://jsfiddle.net/PYKwg/2/embedded/result/

4

3 に答える 3

2

これを試してみてください: http://jsfiddle.net/CXvRn/10/すべてコードに含まれています:

  1. #mainWrapper で #main をラップしました
  2. #mainWrapper に padding-left 220px を追加しました。
  3. 「#top .thing」と「#bottom .thing」に float:left を追加しました
于 2011-10-12T19:52:49.147 に答える
1

解決策は、メインコンテンツ セクションの「overflow:auto」です。これにより、ブロック フローの新しいフレームが確立されます。このフレームからコンテンツが流出することはありません (フローティング コントロール セクションの下/後ろ)。参照: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

ここで実際に見てください： http://jsfiddle.net/PYKwg/3/embedded/result/

（ありがとうアレックス）

于 2011-10-12T21:05:02.730 に答える
1

http://jsfiddle.net/CXvRn/29/

最も基本的な jquery バージョンを次に示します。#main の合計水平パディングや水平マージンなどの定数を設定する必要があります。jQuery を使用してそれらを派生させることはできますが、それらが決して変更されない場合は、それらを自分で設定してコード行を節約することもできます。

jqueryでそれをしたい場合は、ここでそれを理解することができます: jQueryを使用して整数としてのピクセルのパディングまたはマージン値

于 2011-10-12T20:33:14.933 に答える