html - 3 DIV's - Center Middle 和其他占用剩余空间

Question

我需要 3 个 DIV - 你可以在上图中看到 3 种颜色。

中间的 DIV 需要始终为 960px，并且所有内容都需要居中(您可以看到上面的 2 条灰线)。

其他 2 个 DIV 需要占用所有其他可用空间。如果我放大和缩小页面，红色和黄色的 DIV 需要随着页面展开，而中间的绿色 DIV 保持居中。

我已经尝试过 DIV 解决方案和 Table 解决方案，但无法适应。

HTML

<div id="div1" style="background-color:red"></div>
<div id="div2" style="background-color:red"></div>
<div id="div3" style="background-color:red"></div>

如有任何建议，我们将不胜感激。

谢谢

** 更新: http://jsfiddle.net/scxAq/

致力于此...取得了有限的成功...

Answer 1

有点麻烦，但它应该以一种响应式的方式工作。

代码:

<div id="wrapper">
<div id="div1" style="background-color:red;"><p>test</p></div>
<div id="div2" style="background-color:green;"><p>test</p></div>
<div id="div3" style="background-color:yellow;"><p>test</p></div>
</div>​​​​​​​​​​​​​​​​​​​​​​

CSS:

​#wrapper {
    width:100%;
    position:relative;
    overflow:hidden;
}
#div2 {
    z-index:2;
    margin:0 auto;
    width:960px;
}
#div1, #div3 {
    position:absolute;
    top:0;
    width:50%;
    z-index:1;
}
#div1 {
    margin-left:-480px; /* half of central div */
}
#div1 > * {
    margin-left:480px; /* half of central div */
}
#div3 {
    right:0;
    margin-right:-480px; /* half of central div */
}
#div2 > * {
    margin-right:480px; /* half of central div */
}​

Live demo (尝试调整窗口大小)