CSS позиция с плавающей точкой

Question

Я знаю, что существует множество вопросов, касающихся поплавков, но я, похоже, немного застрял в том, как преодолеть эту проблему.

Смотрите мой пример здесь: http://jsfiddle.net/eE9WT/1/

То, что я пытаюсь сделать (или на самом деле пытаюсь избежать), - это третий .float div, начинающийся после запуска второго .float div.

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

Хотите верьте, хотите нет, но за 5 лет работы в сети я впервые столкнулся с этой проблемой!

Спасибо, ребята

Answer 1

Display:inline-block;
zoom:-1;

Больше, чем плавать, это что-то для вас делает. Только в редких случаях я использую float. Я знаю, что это не соответствует твоей цели, я просто исследую свою сторону.

Answer 2

Вы можете добавить правило для второго числа с плавающей точкой, чтобы быть правым

.float + .float {
    float: right;
}

Answer 3

Я думаю, что это решение, которое вы ищете:

JSFiddle

Я переместил все div влево с помощью float. В правой части экрана освободилось место с padding-right на контейнере. А затем с помощью position: relative; переместил второй столбец в это пространство.

Answer 4

Эта статья поможет в создании макета с плавающей ячейкой: http://matthewjamestaylor.com/blog/floating-boxes-css-layout.htm

Также проверьте его другие макеты, на случай, если они лучше подойдут для вашего дизайна!