浮動小数点間のCSSオートフィットコンテナ：left＆float：right divs

Question

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

センターdivには、左側のナビゲーションボタンと右側のチャットウィンドウの間に中心のコンテンツが自動的に挿入されるgoogle + - > homeと同様に、min-widthの設定が必要です。次に、画面の幅が一定のポイント（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; } 

あなたはより多くの情報が必要な場合は私に知らせてください、事前に助けてくれてありがとう。

Answer 1

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

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

これは、すべての近代的なブラウザとでもIE7で動作します。

Answer 2

1つのトリックは浮動小数点数を使用するのではなく、表形式で表示します。

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で動作しない（以下、誰がまだそのがらくたの権利をサポートしていますか？ ）。しかし、おそらくあなたはCSS3Pieを見ることができます。これは、IE7のように正式にサポートしていないブラウザにCSS（3）を使用できるようにします。だからおそらくdisplay：table-cellもうまくいくでしょう。