CSS float leere Leerzeichen

Question

Ich habe mehrere divs in einem Wrap, sie haben unterschiedliche Höhe. Ich möchte nach links schweben. 2 Divs können in einer Reihe passen. Aber da jedes Div eine andere Höhe hat, ist in der nächsten Reihe ziemlich viel Platz übrig. Kann ich den Raum entfernen und die Divs nach oben verschieben?

Bitte schauen Sie auf das Bild:

Hier Code:

<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. Die div-Höhen sind nicht festgelegt. Dies ist nur zum Beispiel. Edit: Sorry, ich hätte erwähnen sollen, dass es nicht möglich ist, Markup zu bearbeiten.

Answer 1

Try masonry zu verwenden. Dies sollte Ihnen helfen, Ihr div ohne leeren Platz anzuordnen.

Das ist, wie es als ein Beispiel für den Code verwendet wird: 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' 
    }); 
});​ 
​ 

und 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

Ich bin mir nicht sicher, ob es funktionieren würde, aber Sie können Floating-Box 1 und Box 3 auf der linken Seite und Feld 2 nach rechts

EDIT versuchen: funktioniert in firefox http://jsfiddle.net/NsH5M/1/

Answer 3

geben float:right-.box2 schreiben wie folgt aus:

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

prüfen diese http://jsfiddle.net/NsH5M/2/

Answer 4

, wenn Sie Ihr Markup bearbeiten können, können Sie box1 und box3 in einem Behälter wickeln, das schwimmt:

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

Sie können auch schwimmen: Recht box3 aber das wird leicht auf das Ergebnis (Es wird eine Lücke zwischen den links und rechts schwebenden Boxen geben, was je nach Design kein Problem darstellt.

Answer 5

Verwenden Sie einfach float: rechts für die Elemente, die Sie auf der rechten Seite möchten. In diesem Fall:

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

Ihre jsfiddle aktualisiert here

Answer 6

Isotope kann dies für Sie tun, mit dem Mauerwerk Layout.

Answer 7

Korrekte Lösung ... Die Schlüsselfrage lautet "Haben Sie nur 2 Spalten?". Und da es hier der Fall ist, wäre die richtige Lösung sein, dies:

(dies ist ein Code jQuery aber offensichtlich kann es, wenn einige Worte in reinen JS erfolgen)

Es ist meine Fallklasse „Add- info "wurde allen Elementen im Container zugewiesen. Sie überprüfen einfach, ob das nächste Element nach links oder rechts verschoben werden soll. Verwenden Sie keine komplexen Skripte für alles. Die Hälfte der Menschen greift per Handy auf das Internet zu, und die Anzahl der mobilen Daten ist begrenzt.

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