2

左に配置されたdiv（Div 1）と中央に配置されたdiv（Div 2）を探しています。

ユーザーがウィンドウのサイズを変更するとき、中央の div (Div 2) は、Div 1 の端にぶつかるまで中央に配置する
必要があります。Div 1 (左の div) の幅に加えてDiv 2 の幅の半分は、ブラウザーの幅の半分よりも大きいです。

これをJavaScriptなしで実現することについて何か考えはありますか?

画像としての例

以下は、動作する実際の例です: http://jsfiddle.net/pjg8D/9/

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


<!-- http://i42.tinypic.com/iqv5tu.jpg -->

#fixedBar {
    height: 50px;
    width: 100%;
    background: #f99;       

}

#div1 {
    width: 200px;
    height: 50px;
    background: green;
    float: left;
}

#div2 {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background: blue;
}
4

2 に答える 2

1

質問の解決策はmin-width、コンテナdivで使用することです。この幅の比率は次のように計算されます:(Div1の幅+Div2の幅の半分）x2。

解決策はここにあります：http：//jsfiddle.net/pjg8D/16/

于 2012-04-21T19:42:01.173 に答える
0

左側の div に%幅を指定してから、右側の divleft-marginに同じ幅を指定する必要があり%ます。これを試して：

#div1 {
    width: 25%;
    height: 50px;
    background: green;
    float: left;
}

#div2 {
    width: 250px;
    height: 50px;
    margin: 0 0 0 25%;
    background: blue;
}

更新されたフィドル

于 2012-04-21T19:12:47.470 に答える