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;
}

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

三柱流体css

1 个答案: