CSS float пустое пространство

Question

У меня есть несколько div в обертке, у них разная высота. Я бы хотел поплыть влево. 2 Divs могут поместиться в ряд. Но поскольку каждый из div имеет разную высоту, в следующей строке осталось довольно много места. Можно ли удалить пространство и переместить div вверх?

Пожалуйста, посмотрите на изображение:

Вот код:

<div class="wrap"> 
    <div class="box1">Box1 with less height.</div> 
    <div class="box2">Box2 with more height.</div> 
    <div class="box3">Box3 with whatever height.</div> 
</div> 

CSS:

.wrap{ 
    width:410px; 
    border:1px solid red; 
    overflow:hidden; 
} 

.box1{ 
    width:200px; 
    height:50px; 
    float:left; 
    border:1px solid green; 
} 

.box2{ 
    width:200px; 
    height:150px; 
    float:left; 
    border:1px solid blue; 
} 

.box3{ 
    width:200px; 
    height:250px; 
    float:left; 
    border:1px solid blue; 
} 

JSFiddle: http://jsfiddle.net/NsH5M/

PS. Высота div не фиксирована. Это только, к примеру. Редактировать: Извините, я должен был упомянуть, что его невозможно редактировать разметкой.

Answer 1

Попробуйте использовать masonry. Это должно помочь вам организовать ваш div без пустого места.

Вот как он используется в качестве примера кода: jsfiddle

HTML:

<div class="wrap"> 
    <div class="box box1">Box1 with less height.</div> 
    <div class="box box2">Box2 with more height.</div> 
    <div class="box box3">Box3 with whatever height.</div> 
</div> 

JavaScript:

$(function(){ 
    $('.wrap').masonry({ 
     // options 
    itemSelector : '.box' 
    }); 
});​ 
​ 

И CSS:

.wrap{ 
    width:410px; 
    border:1px solid red; 
    overflow:hidden; 

} 

.box{ 
    float: left; 
    width: 200px; 
} 

.box1{ 
    height:50px; 
    border:1px solid green; 
} 

.box2{ 
    height:150px; 
    border:1px solid blue; 
} 

.box3{ 
    height:250px; 
    border:1px solid blue; 
} 

Answer 2

Я не уверен, если это будет работать, но вы можете попробовать с плавающим окном 1 и окно 3 слева и 2 коробки с правым

EDIT: работаю в Firefox http://jsfiddle.net/NsH5M/1/

Answer 3

Дайте float:right к .box2 Написать так:

.box2{ 
    width:200px; 
    height:150px; 
    float:right; 
    border:1px solid blue; 
} 

Check это http://jsfiddle.net/NsH5M/2/

Answer 4

, если вы можете изменить разметку, вы можете обернуть box1 и Box3 в контейнере, который плавал:

http://jsfiddle.net/NsH5M/3/

вы также можете плавать: правильно ваш Box3 но это будет немного изменить исход (между полями, расположенными слева и справа, будет промежуток - это может быть не проблема в зависимости от вашего дизайна.

Answer 5

Просто используйте float: справа для элементов, которые вы хотите справа. В этом случае:

.box2{ 
width:200px; 
height:150px; 
float:right; 
border:1px solid blue; 
} 

Ваш jsfiddle обновленный here

Answer 6

Isotope может сделать это для вас, используя макет.

Answer 7

Правильное решение ... Ключевой вопрос: «У вас есть всего 2 столбца?». А так как здесь это так, то правильное решение было бы это:

(это код JQuery, но очевидно, что это может быть сделано, если еще несколько слов в чистом JS)

Это мой случай класс «адд info "был присвоен всем элементам в контейнере. То, что вы делаете, - это просто проверка того, должен ли следующий элемент перемещаться влево или вправо. Не используйте сложные скрипты для всего. Половина людей имеет доступ к сети с мобильного телефона, а количество мобильных данных ограничено.

function contactFloats() { 
    var leftCounter = 0; 
    var rightCounter = 0; 
    $('.add-info').each(function(){ 
      if(leftCounter <= rightCounter){ 
       $(this).css('float', 'left'); 
       leftCounter += $(this).outerHeight(); 
      }else{ 
       $(this).css('float', 'right'); 
       rightCounter += $(this).outerHeight(); 
      } 
    }); 
}