3 divs：1つの中心div、最大幅と左、右divsは残りのスペースを取る必要があります

Question

私は3つのdivを持っています。 1つのdivは中央に配置され、2つのdivは左右に配置されます。中央揃えのdivの最大幅は400ピクセルです。ここ はCSS

#left{float: left;background-color: red;height:100%;} 
#right{float: right;background-color: green;height:100%} 
#center{max-width:400px;margin: auto;background-color: blue;height:100%} 
#container{width:100%;height:50px;} 
body{color:white;} 

、ここでは、私もjsfiddleを準備HTML

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

です。 divの中央に「左右に伸びる」ように左右のdivが必要です。

Answer 1

​​機能を使用できます。具体

：

width: calc(50% - 200px); 

中心要素の幅が400ピクセルであり、両側が等しい、あなたは、単に半分を表す（合計幅マイナス200pxのの50％を取ることによって双方にとって幅を算出することができるので中心要素の）。これにより、ビューポートの端と中央の要素の端の間の幅が得られます。

Can I Use support table for calc（）。

以下のことを試してみてください：

#left { 
 
    float: left; 
 
    background-color: red; 
 
    height: 100%; 
 
    width: calc(50% - 200px); 
 
} 
 
#right { 
 
    float: right; 
 
    background-color: green; 
 
    height: 100%; 
 
    width: calc(50% - 200px); 
 
} 
 
#center { 
 
    max-width: 400px; 
 
    margin: auto; 
 
    background-color: blue; 
 
    height: 100% 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
body { 
 
    color: white; 
 
}

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

Answer 2

はあなたが行うことができcalc()機能付：

#left{float: left;background-color: red;height:100%; width: calc(50% - 200px);} 
#right{float: right;background-color: green;height:100%; width: calc(50% - 200px);} 

Fiddle here

200px中央の幅のコンテナの半分を表し、50%は両側に2つのコンテナ（左右）があるため、

Answer 3

フレックスを使用しない場合は、簡単になります。

HTML構造を並べ替えずに、をCSSに使用して、#centerをcenter :)に設定します。

#container { 
 
    display: flex; 
 
} 
 
#container > div { 
 
    flex: 1; 
 
    order: 1; 
 
background:yellow; 
 
} 
 
#container > div#center { 
 
    max-width: 400px; 
 
    order: 2; 
 
    
 
    /* let'see it */ 
 
    background: linear-gradient(to left, gray 50%, lightgray 50%) left no-repeat; 
 
    border: solid; 
 
    background-size: 398px auto;/* show the last 2 pixel blank when max-width reached */ 
 
} 
 
#container > div#right { 
 
    order: 3 
 
}

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