Html 当奇数宽度的div被拆分为50%/50%时，剩余的1px会发生什么变化？

假设我想为

div#wrapper

制作一个背景，使一半是蓝色，一半是红色，使用两个宽度为

50%

的div，如下所示：

HTML:

这将从理论上解决这项任务。但是，如果包装的宽度包含奇数个像素，那么剩余的1px会发生什么情况

例如，如果包装的宽度更改为101px，则

#leftSide

的宽度将为50px，

#right side

的宽度将为50px，可能会在中间留下一条1px的垂直白线

浏览器通常是如何呈现的？其中一侧是否会吸收剩余的1px？如果是这样，那么最好的纯CSS方法是什么？我的第一个倾向是将包装的背景设置为红色或蓝色，但是还有其他方法吗？

请参阅

在IE和Firefox中，右侧占据了额外的像素。在Chrome中，两者之间实际上存在一个间隙

---

设置容器的背景似乎是解决此问题的最佳方法。

一种可能的解决方案是不将宽度设置为第二个

DIV

（

#rightSide

）并设置

float:left仅位于左侧
DIV
。由于这些是块元素，因此如果未设置，它们将始终扩展到全部可用宽度

在本例中，包装宽度为3px，左侧容器的宽度为1-2px（取决于浏览器），右侧容器需要包装内剩余的水平空间：

我原以为右手边会增加一个像素，或者右边的最后一个像素没有任何背景颜色。这就是众所周知的抛硬币。这就是为什么1px在浏览器中发生变化，而在不同的浏览器中则不同。没有“正常”。有谁能告诉我，这个完全有效的解决方案有什么问题吗？
<div id="wrapper">
    <div id="leftSide"></div>
    <div id="rightSide"></div>
</div>

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;
}