html - 具有动态中间的 3 列 div - 右 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

如果您对更简单、更现代的方法感兴趣，请放弃 float 并使用 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. react 灵敏
6. float 框提供的布局容量有限，因为它们从未用于建筑布局，与 float 框不同，flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

---

注意所有主流浏览器都支持 flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请在此处的左侧面板中发布您的 CSS:Autoprefixer .