html - 3 DIV's - Centre Middle 和其他占据剩余空间

Question

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

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

其他 2 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

您需要向我们展示 css 代码以了解您到底在做什么。但据我了解，我认为你需要这个：

#div2{
    margin-left:auto;
    margin-right:auto;
}

这将使中间居中div。我希望这是你需要的。

Answer 2

有点陷阱，但它应该以响应的方式工作。

代码：

<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 */
}​

现场演示（尝试调整窗口大小）

Answer 3

HTML

    <div class="left">hello world!</div>
<div class="center"></div>
<div class="right"> blah balh blah blah balh blah blah balh blah</div>

CSS

.left{
float: left;
width:auto;
background-color:red;
height:30px;
 }
.center{
float: left;
width:960px;
background-color:blue;
margin:auto;
height:30px;
}
.right{
float: left;
width:auto;
background-color:yellow;
height:30px;
}