javascript - 我可以防止两个宽度为 50% 的 div 以奇数宽度下降吗？

Question

我有一个包含 div 的 100% 和两个宽度为 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，是否有一种技术可以用来防止这种情况发生？

Answer 1

您可以将半个 div 包裹在一个 div 中并使用 display: table;

HTML

<div class="container">
  <div class"half"></div>
  <div class"half"></div>
</div>

CSS

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