CSS - Auto-füllen die leeren Räume mit floating divs
Ich versuche, erstellen Sie ein grid-layout http://www.gablabelle.com/.
Ich habe mehrere divs (Bilder) mit float: left; Eigentum und ich Frage mich, warum es gibt ein paar leere Räume, und warum das floating divs nicht füllen die Lücken.
Vielen Dank für Ihre Zeit und Hilfe.
UPDATE: ich jetzt die jQuery isotope, haben aber immer noch Lücken... keine Ahnung?
- Einige source-code.
- Sie haben, um zu sehen, das layout bei gablabelle.com zu verstehen.
- Siehe mein Kommentar in deinem duplizieren (frech!) Frage, vielleicht ist die Weise, die Sie bekommen können, was Sie wollen, wenn auch ohne Mauerwerk oder Isotope.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ist das, wie schwebend funktioniert. Diese Lücken sind da, weil Elemente Schwimmer nach dem anderen bricht in eine neue Zeile. Es füllt nicht den Raum oben.
Wenn Sie möchten, eine ungleichmäßige raster-Effekt, dann würden Sie brauchen, um eine javascript-Lösung, wo Sie absolute Positionen. Ich würde empfehlen, die Mauerwerk-plugin, ich denke der vorher/nachher-Beispiel auf der homepage zeigt das problem und die Lösung, die Sie wollen.
Es scheint, dass Sie sind auf der Suche nach einem Weg, um füllen Sie alle Felder auf der Seite. Ist dies nicht möglich, einfach durch CSS. 'float: left;' ist einfach füllt den Raum in der Seite, Bild für Bild, und nicht, wenn man bedenkt, wie es passt alles zusammen.
Passen Sie alle Teile zusammen, so dass Sie sitzen gemütlich und wie ein Puzzle wird nicht einfach sein. Es ist tatsächlich ein ziemlich Komplexes problem, und es ist mit dem knapsack problem (http://en.wikipedia.org/wiki/Knapsack_problem) und das Verpackungs-problem (http://en.wikipedia.org/wiki/Packing_problem).
Um dieses Problem zu lösen, bin ich sicher, dass es jQuery oder JavaScript (oder vielleicht auch PHP) - Bibliotheken zur Verfügung. Alternativ können Sie manuell, um die Fotos so, dass Sie zusammen passen in eine ordentliche Mode.
Glück!
Dadurch verursacht wird, dass die Lücken: