带动态中间右侧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。