0

ページの 100% 幅を埋める div 内に 3 つの div がある配置を作成しようとしています。中央の div の幅は固定され、外側の 2 つの div はそれぞれ残りのスペースの 50% を占有します。これは CSS を使用して実現できますか?

次のコードを使用して、これを達成しようとして、動作しないhttp://jsfiddle.net/6y5hn/フィドルを設定しました。

<div id="outerbox">
    <div id="leftbox">(elastic width) This should occupy all the space in the grey box to the left of the red box</div>
    <div id="centerbox">(fixed-size) should be in the center of the grey box</div>
    <div id="rightbox">(elastic width) This should occupy all the space in the grey box to the right of the red box</div>
</div>

CSS の場合:

#outerbox {
    background-color:gray;
    margin-top:50px;
    width:100%;
    height:200px;
}

#centerbox {
    background-color:red;
    margin-left:auto;
    margin-right:auto;
    float:left;
    height:100px;
    width:300px;
}

#leftbox {
    background-color:yellow;
    height:300px;
    float:left;
}

#rightbox {
    background-color:pink;
    height:300px;
    float:left;
}

ジェームズ

4

3 に答える 3

1

固定幅のフロートを使用するだけです

#fixed{float:left;width:360px;background-color:green;height:100%;color:yellow;}

#elastic{background-color:#ddd;height:100%;color:grey;}

http://jsfiddle.net/am46bm43/

于 2014-12-18T13:47:03.303 に答える
1

および(150px = センターボックスの幅の半分) に追加width:calc(50% - 150px);します。#leftbox#rightbox

http://jsfiddle.net/6y5hn/2/

ブラウザのサポート: http://caniuse.com/calc

于 2013-11-12T18:50:45.090 に答える
1

これが CSS のみを使用して達成できるかどうかはわかりませんが、固定およびパーセントベースのページ幅をより効果的に管理するのに役立つ JavaScript コードの便利なスニペットを次に示します。

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined') {
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else {
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

}

resize()その後、ページの読み込み時とページのサイズ変更時に関数を呼び出すことができます。次のようなものです：

<body onload="resize()">

divここから、計算されたページの幅があるため、それに応じて個々の のサイズを変更できます。

document.getElementById("leftbox").style.width = (viewportwidth - 300)/2 + "px";
document.getElementById("rightbox").style.width = (viewportwidth - 300)/2 + "px";
document.getElementById("centerbox").style.width = 300 + "px";

は 300 ピクセルのcenterbox固定を維持しますが、leftboxとrightboxの幅は、画面の幅から 300 ピクセルを引いて 2 で割った値に等しくなります。

于 2013-11-12T18:58:24.173 に答える