10

假设我想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 会发生什么？

例如，如果包装器的宽度更改为 101 像素，那么宽度#leftSide将是 50 像素，并且宽度#rightSide将是 50 像素，大概会在中间留下一条 1 像素的垂直白线。

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

4

2 回答 2

8

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

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

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

于 2012-07-26T16:11:19.490 回答
-1

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

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

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

于 2012-07-26T16:23:49.883 回答