css - 在固定宽度 div 之间拉伸中心 div 的问题

Question

我有 3 个 div 内联。其中 2 个设置了 px 宽度（在 div 之外）。当窗口调整时，我希望中心 div 填充两个外部 div 之间的所有空间。

这是我尝试的一个例子：http: //jsfiddle.net/3ZPHT

    #div_1 {
    float: left;
    background: red;
    display: inline-block;
    width: 300px;
    height: 50px;
    text-align: left;}
#div_2 {
    overflow: hidden;
    background: green;
    display: inline-block;
    height: 50px;
    text-align: center;
}
#div_3 {
    float: right;
    display: inline-block;
    background: blue;
    width: 350px;
    text-decoration: underline;
    font-weight: bold;
    color: white;
    height: 50px;
    text-align: right;
}

这是我希望它看起来像的一个想法：http: //jsfiddle.net/Q8eVz

非常感谢任何帮助，谢谢。

Answer 1

演示：http: //jsfiddle.net/3ZPHT/1/

HTML：

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

CSS：

#div_1 {
    float: left;
    background: red;
    display: inline-block;
    width: 300px;
    height: 50px;
    text-align: left;}
#div_2 {
    overflow: hidden;
    background: green;
    display: block;
    height: 50px;
    text-align: center;
}
#div_3 {
    float: right;
    display: inline-block;
    background: blue;
    width: 350px;
    text-decoration: underline;
    font-weight: bold;
    color: white;
    height: 50px;
    text-align: right;
}