cssを使用して自動サイズ変更センターdiv？

Question

ブラウザのウィンドウ/ページのサイズを変更するときに3 divを自動的にサイズ変更するのが難しいです。

固定サイズの2つのdivがあり、残りのスペースを埋めるように中央のdivを自動的にサイズ変更し、ページサイズが縮小すると3番目のdivが改行に移動しないようにします。

中間divが約65pxの幅になると、3番目のdivの折り返しを防ぐためdivにmin-widthプロパティを設定します。

私は現在、CSSでこれを達成しようとしていますが、運がないので、javascriptでこれを行う必要がありますか？

javascriptまたはCSSの式はwidth = page.width - div1.width -div3.widthのようになりますが、できるだけjsを使用しないようにしたいと思います。

ありがとうございました！

マイク

あなたが添付された画像で予想される動作を確認することができます。

1）私は現在、収縮に経験しています何 2）欲しい

私はdiv要素のリサイズ、それが持つ-サイズは再ように、内部を100％に設定テキストボックスを持っていますdiv。

右側のdivは、次のように267pxまたは192px（離散的）のいずれかです。または、div-rightのサイズに基づいてマージン - 右を動的にする方法がありますか？

例えば、 HTML

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="centre">   
    <div> 
</div> 

CSS

#wrapper 
{height:84px; 
background-image:url(../images/siteImages/header_back.png); 
background-repeat: repeat-x;} 

#left 
{height:inherit; 
width:512px; 
background-image:url(../images/siteImages/logo.png); 
background-repeat: no-repeat; 
float:left;} 

#centre 
{width:auto; 
margin-left:512px; 
margin-right:267px; 
height:inherit;} 

#right 
{padding-right:10px; 
height:inherit; 
float:right; 
text-align:right;} 

Answer 1

に持つかもしれないmin-widthを削除するあなたのようなものかもしれない：

をこのCSSで

：私はあなたが探しているものだろうと考えてい

#a { width: 512px; float: left; } 
#b { width: auto; margin-left: 512px; margin-right: 200px;} 
#c { width: 200px; float: right; } 

。

Answer 2

あなたが試してみました：

<div id="div2" style="margin-left:auto;margin-right:auto;">content</div> 

をあなたがDIV2

Answer 3

だけ幅&マージン&高さを指定するために、あなたのCSS

#centre {overflow:hidden;} 

必要はありませんが、これを試してください。 。自動的に調整されます。 HTMLの順序を変更する必要はありません。