Puste przestrzenie CSS

Question

Mam wiele elementów div w wrapie, mają różną wysokość. Chciałbym płynąć w lewo. 2 DIV może zmieścić się w rzędzie. Ale ponieważ każdy z elementów div ma inną wysokość, w następnym rzędzie pozostało dość dużo miejsca. Czy mogę usunąć miejsce i przenieść div's up?

Proszę spojrzeć na obraz:

Oto kod:

<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. Wysokości div nie są ustalone. To tylko na przykład. Edycja: Przepraszam, powinienem był wspomnieć, że nie można edytować znaczników.

Answer 1

spróbuje użyć masonry. To powinno pomóc ci zorganizować twój div bez pustej przestrzeni.

Tak to jest używane jako przykład kodu: 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' 
    }); 
});​ 
​ 

i 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

Nie jestem pewien, czy to działa, ale można spróbować pływające okno 1 oraz pole 3 na lewo i pola 2 do prawego

EDIT: działa w firefox http://jsfiddle.net/NsH5M/1/

Answer 3

Daj float:right do .box2 Napisz tak:

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

Sprawdź to http://jsfiddle.net/NsH5M/2/

Answer 4

czy można edytować znaczników, można owinąć box1 i box3 w pojemniku, który jest zwodowana:

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

można również pływać: prawy swoją box3 ale że będzie nieco zmienić wynik (pomiędzy polami unoszonymi po lewej i po prawej stronie pojawi się luka - co może nie być problemem w zależności od projektu.

Answer 5

Po prostu użyj float: w prawo dla elementów, które chcesz z prawej strony. W tym przypadku:

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

Twój jsfiddle aktualizowane here

Answer 6

Isotope może zrobić to za Ciebie, używając układu muru.

Answer 7

Prawidłowe rozwiązanie ... Kluczowe pytanie brzmi "czy masz tylko dwie kolumny?". A ponieważ tutaj jest to przypadek, prawidłowe rozwiązanie byłoby to:

(jest to kod jQuery, ale oczywiście można to zrobić, jeśli kilka słów w czystym JS)

To moja klasa przypadek „Add- info "zostało przypisane do wszystkich elementów w kontenerze. To, co robisz, to po prostu sprawdzenie, czy następny element powinien płynąć w lewo lub w prawo. Nie używaj skomplikowanych skryptów do wszystkiego. Połowa ludzi korzysta z internetu z telefonu komórkowego, a ilość danych mobilnych jest ograniczona.

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(); 
      } 
    }); 
}