相关疑难解决方法(0)

假设我想创建一个背景,div#wrapper这样一半是蓝色,一半是红色,使用两个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;
}

这是上面例子的小提琴.

这理论上可以解决任务.但是,如果包装器的宽度包含奇数个像素,剩下的1px会发生什么？

例如,如果包装纸的宽度更改为101px,则宽度为#leftSide50px,宽度#rightSide为50px,可能会在中间沿着1px垂直白线延伸.

浏览器通常如何渲染？其中一方会吸收剩余的1px吗？而且,如果是这样,解决这个问题的最佳纯CSS方法是什么？我的第一个倾向是将包装器的背景设置为红色或蓝色,但还有其他方法吗？