两个宽度为50%的div之间的间隙问题

Question

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

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

我的问题是，我的每个子<div>元素的宽度只有90像素，导致两者之间存在1像素的间隙。

如何消除间隙？

- Web_Designer

---

它们是90px宽还是50%宽？你会在代码中放哪一个？ - Devin Burke

子 <div> 的 CSS 宽度为：width: 50%; - Web_Designer

Answer 1

将一个 `div` 的宽度设置为 `50％`，另一个可以使用标准块行为来占用其余的宽度：

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

- Devin Burke

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>

- Devin Crossman

---

+1 好的，我会使用浮动。之前我将子 div 绝对定位在它们对应的左右两侧。现在我意识到，将它们向左浮动可以消除间隙，而不是将它们分开。谢谢！ - Web_Designer

Answer 3

你不能把181个像素分成两半。像素是显示器上的一个点，你无法让两个50%的元素将181px平均分配。其中一个需要是90px，另一个需要是91px。

如果你将它们都向同一个方向浮动，左或右，它们之间的间隙会消失，但你可能仍然在另一侧有1像素的间隙——如果这很重要的话。如果这些元素有边框并且你正在使用浮动，则会出现一整套跨浏览器问题。确保进行一些跨浏览器测试。

- Micah Carrick

Answer 4

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

这里有一个非常好的帖子，详细讨论了这个问题。

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

- Adnan Bhatti