2

I am building a prototype mobile web application and trying to get 3 fluid but "equal" columns using just css, I have made the assumption I can use 33% on two columns and 34% on the last column. However this doesn't equal 100%... Any ideas?

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

Basic maths tells me that 33 + 33 + 34 = 100 however in Chrome (Desktop) and Safari (iPhone 4 iOS5) I get some left over container div background colour.

This seems to be a bug with webkit since firefox can render this correctly.

Can anyone recommend a solution or is anyone else experiencing this problem?

4

1 に答える 1

0

column_three を右にフロートさせます。それはこの問題を解決するようです。

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

ところで、非常に興味深いメモです。これを数回行ったことがありますが、ほとんどの場合 Firefox を使用しているため、小さなギャップに気付きませんでした。

于 2011-08-17T01:23:17.700 に答える