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

【问题标题】：gap between two 50% width divs两个 50% 宽度的 div 之间的间隙
【发布时间】：2011-09-10 13:19:51
【问题描述】：

我有一个宽度为 181px 的容器 <div>。

我的容器 div 中有两个子 <div> 元素，每个元素的宽度为 50%。

我的问题是我的每个子<div>元素的宽度只有90px，导致两者之间有1px的差距。

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

【问题讨论】：

他们有90px 宽度还是50% 宽度？您在代码中输入了哪个？
子 <div>s 的 CSS 宽度是这样的：width: 50%;

标签： html width css

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

+1 是的，我要去花车。在我让子 div 绝对定位在其相应的左右两侧之前。我现在意识到将它们向左浮动将消除该间隙而不是将两者分开。谢谢！

【解决方案3】：

您不能将 181 像素一分为二。像素是显示器上的一个像素，您无法获得 2 个 50% 的元素来将 181px 分成两半。一个需要 90px，一个需要 91px。

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

【讨论】：

【解决方案4】：

这个值被四舍五入为整数。

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

Are the decimal places in a CSS width respected?

【讨论】：