html - 如何将剩余宽度应用于其他 2 个 div 中间的 div

Question

我正在尝试用第二个 div 填充屏幕的剩余区域，div 1 和 2 的宽度固定。我怎样才能达到这种效果？

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

问题可以通过使用这个 CSS 代码来解决，当第二个 div 设置为自动时，它将填充剩余区域。

#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green; 
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}

编辑

Answer 1

传统上，这看起来像这样:

CSS:

#div1 {
    float:left;
    width:400px;
    height:200px;
    background-color: gray;
}
#div2 {
    margin-left: 400px;
    margin-right: 400px;
    width:auto;
    height:200px;
    background-color: silver;
}
#div3 {
    float:right;
    width:400px;
    height:200px;
    background-color: green;
}

HTML:

<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>

演示:http://jsfiddle.net/NicoO/5AJkn/

P.S:将屏幕展开 > 800px 以防止布局中断。也可以通过向新父元素添加最小宽度来解决。