CSS-only-Mauerwerk-layout
Brauche ich zur Umsetzung ein ziemlich run-off-the-mill-Mauerwerk-layout. Jedoch, für eine Reihe von Gründen, ich will nicht, JavaScript zu verwenden, um es zu tun.
Parameter:
- Alle Elemente haben die gleiche Breite
- Elemente haben eine Höhe, die nicht berechnet werden server-Seite ein Bild plus verschiedene Mengen von text)
- Ich Leben können mit einer festen Anzahl von Spalten, wenn ich
gibt es eine triviale Lösung, die funktioniert in modernen Browsern, die column-count Eigenschaft.
Das problem bei dieser Lösung ist, dass die Elemente geordnet sind Spalten:
Brauche ich zwar die Elemente bestellt werden, die in Reihen, mindestens etwa:
Ansätze, die ich ausprobiert habe, die nicht funktionieren:
- Die Herstellung von Gegenständen
display: inline-block: Abfälle vertikalen Raum. - Die Herstellung von Gegenständen
float: left: lol, Nein.
Nun ich könnte ändern Sie die server-side-rendering und die Reihenfolge der items dividiert man die Zahl der Elemente durch die Anzahl der Spalten, aber das ist kompliziert, fehleranfällig (basierend auf, wie Browser entscheiden, teilen Sie die posten-Liste in Spalten), so möchte ich es wenn möglich vermeiden.
Gibt es einige neumodische flexbox-Magie, die dies möglich macht?
Kann nicht denken, ein Weg, das hängt nicht von der vordefinierten Höhen. Wenn Sie überdenken, JS, einen Blick auf stackoverflow.com/questions/13518653/..., wo ich die Implementierung einer solchen Lösung ist ganz einfach.
implementieren Sie Ihre Lösung jetzt, danke!
Ich merke, dass Sie sagte CSS-only. Ich möchte nur erwähnen, dass Mauerwerk nicht mehr benötigt jQuery - die minified-Bibliothek unter 8kb - und können initialisiert werden, die mit html allein. Nur für Referenz jsfiddle.net/wp7kuk1t
Wenn Sie bestimmen die Höhe der Elemente vor der Zeit, zu wissen, die line-height, font-size (Sie hatte zu dienen, eine bestimmte schriftart und einige clevere Berechnungen), Bild-Höhe, senkrechte margin und padding können Sie dies tun. Ansonsten können Sie dies mit nur CSS. Man könnte auch so etwas wie PhantomJS zu pre-Rendern jedes Elements und Höhe des Elements, aber es würde erhebliche overhead/Latenz Hinzugefügt.
InformationsquelleAutor Pekka 웃 | 2017-06-05