10

div#wrapper次のように、 2つのdivを使用して、半分が青で半分が赤になるように背景を作成したいとしますwidth:50%。

HTML：

<div id="wrapper">
    <div id="leftSide"></div>
    <div id="rightSide"></div>
</div>

CSS：

body, html, #wrapper {
    width: 100%;
    height: 100%;
}

#wrapper {
    background: white;
}

#leftSide, #rightSide {
    width: 50%;
    height: 100%;
}

#leftSide {
    float: left;
    background: blue;
}

#rightSide {
    float: right;
    background: red;
}

上記の例のフィドルは次のとおりです。

これは理論的にはタスクを解決します。ただし、ラッパーの幅に奇数のピクセルが含まれている場合、残りの1ピクセルはどうなりますか？

たとえば、ラッパーの幅を101ピクセルに変更した場合、幅は50ピクセル、幅は50ピクセルになり#leftSide、#rightSideおそらく中央に1ピクセルの垂直の白い線が残ります。

ブラウザは通常これをどのようにレンダリングしますか？片側が残りの1pxを吸収しますか？そして、もしそうなら、これを回避するための最良の純粋なCSSアプローチは何でしょうか？私の最初の傾向は、ラッパーの背景を赤または青に設定することですが、他のアプローチはありますか？

4

2 に答える 2

8

http://jsfiddle.net/dq323/を参照してください。

IEとFirefoxでは、右側が余分なピクセルを占めます。Chromeでは、実際には2つの間にギャップがあります。

コンテナの背景を設定することは、これに対処するための最良の方法のようです。

于 2012-07-26T16:11:19.490 に答える
-1

考えられる解決策の1つは、幅を2番目DIV（#rightSide）に設定float: left;せず、左側にのみ設定することDIVです。これらはブロック要素であるため、何も設定されていない場合は、常に使用可能な幅全体に拡張されます。

この例では、ラッパーの幅は3px、左側のコンテナーの幅は1〜2px（ブラウザーによって異なります）、右側のコンテナーにはラッパー内の残りの水平方向のスペースが必要です。

http://jsfiddle.net/dq323/1/

于 2012-07-26T16:23:49.883 に答える