帶動態中間右側div的3列div

Question

開始涉及頂部3列div-300px/dynamic/350px的項目。正確的div低於其他人：http://jsfiddle.net/tspencer103/b49mfno4/1/。

我在這裏嘗試了幾個建議，如http://jsfiddle.net/22YBU/。沒有運氣。有什麼建議麼？謝謝。

div #div_1 { 
    float: left; 
    height: 50px; 
    background-color: red; 
    width: 300px; 
} 

div #div_2 { 
    height: 50px; 
    margin: 0px 350px 0px 300px; 
    background-color: green; 
    text-align: center; 
} 

div #div_3 { 
    float: right; 
    height: 50px; 
    background-color: blue; 
    width: 350px; 
} 

<div id="container"> 
    <div id="div_1">LEFT STATIC 300px</div> 
    <div id="div_2">CENTER DYNAMIC</div> 
    <div id="div_3">RIGHT STATIC 350px</div> 
</div> 

Answer 1

如果你有興趣在一個簡單的，更現代的方法，刪除花車和使用flexbox：

HTML（無變化）

<div id="container"> 
    <div id="div_1">LEFT STATIC 300px</div> 
    <div id="div_2">CENTER DYNAMIC</div> 
    <div id="div_3">RIGHT STATIC 350px</div> 
</div> 

CSS

#container { 
    display: flex; 
    } 

#div_1 { 
    background-color: red; 
    width: 300px; 
    height: 50px; 
    } 

#div_2 { 
    background-color: green; 
    text-align: center; 
    height: 50px; 
    flex: 1; /* flexible width */ 
    } 

#div_3 { 
    background-color: blue; 
    width: 350px; 
    height: 50px; 
    } 

個DEMO

Flexbox的好處：

1. 最少的代碼;非常有效的
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning elements
5. 它的響應
6. 不像浮動，這提供有限的佈局能力，因爲他們從來沒有用於建築佈局，Flexbox將是具有廣泛的現代（CSS3）技術選項範圍。

---

注意Flexbox將被所有主流瀏覽器，支持except IE 8 & 9。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前綴，請在左側面板中發佈您的CSS：Autoprefixer。