Question

假设我想为div#wrapper创建一个背景，这样一半是蓝色，一半是红色，使用两个带width:50%的div，如下所示：

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

Here is a fiddle for the above example.

这理论上可以解决这个问题。但是，如果包装器的宽度包含奇数个像素，剩余的1px会发生什么？

例如，如果包装器的宽度更改为101px，则#leftSide宽度为50px，#rightSide宽度为50px，可能会在中间留下1px垂直白线。< / p>

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

Answer 1

请参阅http://jsfiddle.net/dq323/。

在IE和Firefox中，右侧占用了额外的像素。在Chrome中，实际上两者之间存在差距。

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

Answer 2

一种可能的解决方案是不将宽度设置为第二个DIV（#rightSide）并仅在左侧float: left;设置DIV。由于这些是块元素，如果没有设置，它们将始终扩展到完整的可用宽度。

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

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

当奇数宽度的div被分割为50％/ 50％时，剩余的1px会发生什么？

2 个答案: