三列fluid 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。