Html 带动态中-右div下拉菜单的3列div

启动了一个项目，涉及顶部的3列div-300px/dynamic/350px。右div低于其他div:

我在这里尝试了一些建议，比如。不走运。有什么建议吗？谢谢

 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>

div#div#u 1{
浮动：左；
高度：50px；
背景色：红色；
宽度：300px；
}
分区#分区2{
高度：50px；
利润率：0px 350px 0px 300px；
背景颜色：绿色；
文本对齐：居中；
}
分区#分区3{
浮动：对；
高度：50px；
背景颜色：蓝色；
宽度：350px；
}
左静态300px
中心动力
右静态350px

如果您对一种简单、更现代的方法感兴趣，请放下浮点数并使用：

HTML（无更改）

Flexbox的好处：

最小码；效率很高

它反应灵敏

与浮动不同，浮动提供有限的布局容量，因为它们从未用于构建布局，flexbox是一种具有广泛选项的现代（CSS3）技术

---

---

请注意，所有主要浏览器都支持flexbox。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请在此处的左面板中发布CSS:。

非常好的建议。你更喜欢Flexbox而不是Bootstrap？仍然好奇如何“修复”原始代码。是的，我更喜欢flexbox而不是bootstrap（我很少使用）。Flexbox直接来自W3C，在我看来，它是未来的CSS布局。。。（基本上，使子div

内联块

并用于调整灵活div的大小）。。。哇！这很简单：）谢谢你，迈克尔。

<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>

#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;
  }