1

すでに質問されている類似のシナリオをいくつか見つけましたが、この特定の問題を解決するシナリオはありません。誰かが助けてくれることを願っています！

3 つの div が連続しています。中央の div は中央に配置され、幅と高さが設定されています。外側の 2 つの div を拡張して、ウィンドウの端と中央の div の端の間の残りのスペースを埋める必要があります。このような：

http://kthornbloom.com/example.jpg

*注-CSSで解決したいのですが、javascriptが必要な場合は大丈夫です

*注 2 - これの目的は、中央の div を中央に配置することではありません。それを行うためのより良い方法があることはわかっています。目的は、中央を除いてページの全幅である必要がある背景要素を使用するサイトのデザインです。

4

3 に答える 3

8

参照: http://jsfiddle.net/thirtydot/xhCXq/

HTML:

<div id="container">
    <div id="left">&nbsp;</div>
    <div id="mid">mid</div>
    <div id="right">&nbsp;</div>
</div>

CSS:

#container {
    width: 100%;
    height: 200px;
    display: table
}
#left, #mid, #right {
    display: table-cell;
    background: #ccc;
    outline: 2px dashed blue
}
#mid {
    width: 400px;
    background: #f0f
}

それはあなたの質問にうまく答えると思いますが、これは私に関係があります：

これの目的は、中央の div を中央に配置することではありません。それを行うためのより良い方法があることはわかっています。目的は、中央を除いてページの全幅である必要がある背景要素を使用するサイトのデザインです。

本当にこのような複雑なソリューションが必要ですか? 代わりにもっと単純なものかもしれません:
http://jsfiddle.net/thirtydot/xhCXq/1/

于 2011-04-01T00:54:57.297 に答える
3

CSSは動的言語ではないため、CSSを使用して残りのスペースを計算することはできません。そのためにjQueryを使用できます。以下の例では、中央のdivは400pxのままですが、残りのスペースは左と右のdivに分割されます。 

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);

http://jsfiddle.net/M5Ghx/3/で実例を確認してください

于 2011-03-31T20:49:39.527 に答える
3

これが役立つかどうかはわかりませんが、この楽しいトリックを発見しました. IE 8、IE 9、FireFox 3.6、FireFox 4、および Safari 5 (少なくとも Windows の場合) で動作するようです。

<div name="test1" id="test1" style="position:absolute; left:0px; top:95px; width:50%; height:300px; z-index:5; background: #7BCDC9;">
This starts at the left edge, and goes all the way to the middle of the screen.
</div>
<div name="test2" id="test2" style="position:absolute; left:50%; top:95px; width:50%; height:300px; z-index:5; background: #4D3627;">
Starts in the middle, and goes all the way to the right edge.
</div>

次に、 z-index:10; を使用して、中央の div を上に追加します (お好みの方法を使用)。他の要素の「上」にします。

于 2011-06-21T02:00:47.087 に答える