html - 3つのDIV-センターミドルとその他の部屋の残りの部分を占める

Question

私は3つのDIVを持っている必要があります-あなたは上の画像で3つの色を見ることができます。

中央のDIVは常に960pxである必要があり、すべてが中央に配置される必要があります（上の2本の灰色の線が表示されます）。

他の2つのDIVは、他のすべての使用可能なスペースを占有する必要があります。ページをズームインおよびズームアウトすると、赤と黄色のDIVはページとともに拡大する必要がありますが、中央の緑のDIVは中央に配置されたままです。

DIVソリューションとテーブルソリューションを試しましたが、うまくいきません。

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