Javascript 我可以防止两个50%宽度的div以奇数宽度掉落吗？

我有一个100%的包含div和两个50%宽度的div：

<div class="container">
     <div class="half">Box 1</div>
     <div class="half">Box 2</div>
</div>

.container {
     float: left;
     width: 100%;
}
.half {
     float: left;
     width: 50%;
}

---

很明显，如果屏幕宽度是偶数，比如960px，那么它可以工作，但是961px会导致右框下降。我知道为什么会发生这种情况：961不能以2的速度均匀移动，导致左侧的方框向上取整。没有JS/jQuery，有没有一种技术可以防止这种情况发生？

您可以将半个div封装在一个div中，并使用display:table

HTML

---

我不知道它是否有效，但你可以尝试使用动态边距，比如边距：0px自动。与为半部分做49%宽度之类的操作相比，更有可能在元素上应用某种填充或边距。通过对两个元素应用框大小并将边距调零，可以避免填充问题：

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin-left:0px;
margin-right:0px;

---

注意：这与ie8及以下版本不兼容

请尝试将该代码放入JSFIDLE。它很好用。你还有别的事要做。出于某种原因，我现在所处的位置是阻止JSFIDLE表单加载，不知道为什么。浏览器没有奇数像素的问题，应该能够计算出50%。很可能还有其他风格影响布局，一切都很基本，运行Eric Meyer的重置。我的半div也应用了display:table和position:relative，但当我关闭和打开它时，这似乎没有任何影响。我无法使用提供的代码重现该问题。也许如果有一个代码笔或JSFIDLE来说明这个问题，我们可以更好地解决它，但它似乎没有任何影响您使用的是什么浏览器？

.container{ display: table; }
.half{ display: table-cell; vertical-align: top; }

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin-left:0px;
margin-right:0px;