三列流体css

Question

我正在构建一个原型移动 Web 应用程序并尝试仅使用 css 获得 3 个流畅但“相等”的列，我假设我可以在两列上使用 33%，在最后一列上使用 34%。但是，这不等于 100%...有什么想法吗？

/* basic reset */
*, html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body, #container {
  width: 100%;
  height: 100%;
}

/* layout */
#container {
  background-color: red;
}

.column_one, .column_two {
  float: left;
  width: 33%;
  background-color: lime;
}

.column_three {
   float: left;
   width: 34%;
   background-color: aqua;
}

基本数学告诉我 33 + 33 + 34 = 100 但是在 Chrome（桌面）和 Safari（iPhone 4 iOS5）中，我得到了一些剩余的容器 div 背景颜色。

这似乎是 webkit 的一个错误，因为 firefox 可以正确呈现它。

谁能推荐一个解决方案，或者其他人是否遇到过这个问题？

Answer 1

使 column_three 向右浮动。这似乎解决了这个问题。

.column_three {
   float: right;
   width: 34%;
   background-color: aqua;
}

顺便说一句，一个非常有趣的注释，我已经这样做了几次，但从未注意到小的差距，可能是因为我大部分时间都使用 Firefox。