2012-03-14 5 views
1

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

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

То, что я пытаюсь сделать (или Infact, пытаясь избежать) является третьим .float ДИВ начиная после запуска второй .float дел.

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

Верьте или нет, в течение моих 5 лет развития для Интернета это, кажется, первый раз, когда я столкнулся с этой проблемой!

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

+0

Этот ответ может помочь вам: http://stackoverflow.com/a/9141944/681807 –

+0

Ребята благодарит за помощь. После обхода некоторых обсуждений в Stackoverflow об этом кажется, что этот плагин имеет решение: http://masonry.desandro.com/index.html Немного боли, чтобы прибегнуть к плагину, но он работа очень хорошо. Этот jsfiddle, казалось, был самым близким, который я получил до обнаружения плагина: http://jsfiddle.net/gK2Vn/ Проблема в том, что если у вас есть контент в ваших плавающих divs, он, кажется, не увеличивает высоту из дивизий. Если есть кто-то, кто, возможно, опирается на этот jsfiddle, это было бы здорово, поскольку они были очень близки! – remi90

+1

Разве это не потому, что вы устанавливаете 'height', а не' min-height' при установке случайных высот div в вашем Javascript? http://jsfiddle.net/gK2Vn/1/ –

ответ

0

Вы можете добавить правило для второго поплавка быть правым

.float + .float { 
    float: right; 
} 
0

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

JSFiddle

Я переехал все Див-х к слева - float. Сделано некоторое пространство в правой части экрана с padding-right на контейнере. И затем использовал position: relative;, чтобы переместить второй столбец в это пространство.

0
Display:inline-block; 
zoom:-1; 

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