11

float:leftCSS（3）で、 divとdivの間の中央のコンテナーdivの幅を自動調整できる方法を探していfloat:rightます。

min-width中央のdivには、中央のコンテンツが左側のナビゲーションボタンと右側のチャットペインの間に自動的に収まるgoogle +-> homeと同様に、セットを設定する機能も必要です。次に、画面幅が特定のポイント（javascriptで検出）を超えて縮小すると、チャットペインが最小化されてスペースが節約されます。

これが機能するためのアクティブなモックアップです：http：//jsfiddle.net/9vrby/

また、これが私が今使っているcssコードです：

#left{ float:left; width:200px; height:400px; border:1px solid #000; }

#center{ float:left; width:auto; height:400px; border:1px solid red; }

#right{ float:right; width:100px; height:400px; border:1px solid blue; }

さらに詳しい情報が必要な場合はお知らせください。事前にサポートに感謝します。

4

2 に答える 2

22

#centerで、ドロップしfloat: leftて追加しoverflow: hiddenます。また、#centerHTMLの最後に移動する必要があります。

http://jsfiddle.net/thirtydot/9vrby/14/

これは、最新のすべてのブラウザー、さらにはIE7でも機能します。

于 2012-06-01T23:48:17.560 に答える
4

1つのトリックは、floatを使用するのではなく、display：table-cellを使用することです。

http://jsfiddle.net/9vrby/8/

HTML：

<div id='left'></div>
<div id='center'></div>
<div id='right'></div>

CSS：

#left{ display:table-cell; min-width:200px; height:400px; border:1px solid #000; }
#center{ display:table-cell; min-width:200px; width:100%; height:400px; border:1px solid red; }
#right{ display:table-cell; min-width:100px; height:400px; border:1px solid blue; }

ただし、この方法はIE7では機能しないことに注意してください（以下では、誰がそのがらくたをサポートしていますか？）。しかし、おそらく、IE7のようにCSS（3）を公式にサポートしていないブラウザーにCSS（3）を使用できるようにするCSS3Pieを見ることができます。したがって、おそらくdisplay：table-cellも機能します。

于 2012-06-01T23:44:30.977 に答える