html - センターdivの幅を計算するにはどうすればよいですか

Question

私は3つをdiv水平に積み重ねています->左、中央、右。

左右はで固定幅250pxです。センターdivの幅をできるだけ大きくしたい。どうすればよいですか？

これdivを可能な限り最大に設定したら、div内側margin:0 auto;を中央揃えに設定します。

Answer 1

ここでは、要素を定義する順序が重要です。HTMLで中央のdivを作成する前に、左/右のdivを作成する必要があります。これは、ブラウザが中央のdivに使用できるスペースを知る前に、レイアウトの左側/右側を描画する必要があるためです。

ここに例があります。http://jsfiddle.net/vtvxb/

Answer 2

これを達成するために計算を行う必要はありません。あなたはあなたのHTMLと少しのCSSのいくつかの巧妙な構造化によってそれをすることができます！

これを試してください-実際の例をここで表示します：http：//jsfiddle.net/zfg6m/1/

HTML

<div class="container">
    <div class="left-col">
        This is my left column!
    </div>
    <div class="right-col">
        This is my right column!
    </div>
    <div class="center-col">
        This is my center column
    </div>
</div>

CSS

.left-col {
  background-color: yellow;
  float: left;   
}

.right-col {
  background-color: orange;
  float: right;  
}

.center-col {
  background-color: blue;   
}

このコードで何が起こっているのですか？中央の柱の上に配置された2つの柱を浮かせています。2つのフロートはクリアされていないため、それらは崩壊し、中央の柱が領域の100％の幅を満たすためのスペースを形成します。これにより、中央の列を2つの列の間に保ちながら、幅を動的に保つことができます。

Answer 3

http://dabblet.com/gist/3743636 「オーバーフロー：非表示」はここにあなたを救います。ソースの順序は次のようにする必要がありますが、

<div class="left"></div>

<div class="right"></div>

<div class="center"></div>

また、中央のdivにマージンを設定する必要はありません（すべきではありません）。「overlflow：hidden」はフロートをクリアすることです。詳細については、http：//www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ （推奨読書）を参照してください。

Answer 4

幅はpage body width-になり500pxます。