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アプローチは何でしょうか?私の最初の傾向は、ラッパーの背景を赤または青に設定することですが、他のアプローチはありますか?