Трехколонный флюид css - PullRequest
Новая
       6

Трехколонный флюид css

2 голосов
/ 17 августа 2011

Я создаю прототип мобильного веб-приложения и пытаюсь получить 3 текучих, но "равных" столбца, используя только css. Я сделал предположение, что могу использовать 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 (Desktop) и Safari (iPhone 4 iOS5) я получаюнекоторый оставшийся над цветом фона div контейнера.

Это похоже на ошибку в webkit, так как firefox может правильно ее отобразить.

Кто-нибудь может порекомендовать решение, или кто-то еще сталкивается с этой проблемой?

1 Ответ

0 голосов
/ 17 августа 2011

Сделать column_three плавающим направо.Кажется, это решает эту проблему. 

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

Кстати, очень интересное замечание, я делал это пару раз, но никогда не замечал небольшой разрыв, вероятно, потому что большую часть времени я использую Firefox.

...