css: float Blöcke um den gesamten freien Speicherplatz zu belegen
Ich versuche ein "Bildmosaik" zu erstellen, das hauptsächlich aus Bildern derselben Größe besteht, von denen einige die doppelte Höhe haben.
Sie sollten alle sauber ausrichten so:
Um die automatische Erzeugung dieser Mosaik so einfach wie möglich zu machen, dachte ich, sie zu schweben wäre die beste Option. Leider bewirkt der große Block, dass die folgenden dahinter fließen, aber nicht vorher:
Was kann ich tun - abgesehen davon, dass ich sie manuell positioniere -, um die Bilder an den gewünschten Ort zu bringen, und trotzdem leicht automatische Layouts erstellen zu können?
Der Code, den ich momentan verwende, ist:
HTML:
%Vor%CSS:
%Vor%4 Antworten
Pure CSS-Lösung
Getestet in Firefox, IE8 + (IE7 sieht so aus, als müsste es um einen oberen Rand erweitert werden, der zu 2.1 hinzugefügt wurde, weil er 1.1 überlappt). Siehe Geige . Dies setzt voraus, dass .h2 das mittlere Div (wie in Ihrem Beispiel) ist. Wenn am meisten div übrig gelassen wird, sollte es keine Änderung benötigen. Wenn Sie am rechten Rand sind, müssten Sie den negativen Rand erweitern, um auch den dritten div zu enthalten.