两个 50% 宽度的 div 之间的间隙

Question

我有一个宽度为 181px 的容器

。

我的容器 div 中有两个子

元素，每个元素的宽度均为 50%。

我的问题是我的每个子

元素的宽度仅为 90px，导致两者之间有 1px 的间隙。

对于消除差距有什么建议吗？

Answer 1

将一个 div 的宽度设置为 50%，另一个可以使用消耗其余宽度的标准块行为：

<div style="width: 181px;">
    <div style="width: 50%; float: left;"></div>
    <div></div>
</div>

Answer 2

将它们设计为花车？

<div style="width:181px;border:1px solid;height:100px;">
    <div style="width:50%;background:#F00;height:100%;float:left;"></div>
    <div style="width:50%;background:#00F;height:100%;float:left;"></div>
</div>

Answer 3

您无法将 181 个像素分成两半。像素是显示器上的一个像素，您无法使用 2 50% 的元素将 181px 分成两半。一个需要是 90px，一个需要是 91px。

如果你将它们都浮动到相同的方向，无论是向左还是向右，它们之间的间隙就会消失，但另一侧可能仍然有 1px 的间隙——如果这很重要的话。如果这些元素有边框并且使用浮动，那么您将遇到一系列全新的跨浏览器问题。确保进行一些跨浏览器测试。

Answer 4

那么该值将四舍五入为整数。

这是一个非常好的线程，其中包含更多细节。

CSS 宽度中的小数位是否受到尊重？