Wie lassen sich DOM-Elemente horizontal und nicht horizontal in HTML stapeln und überlaufen lassen?

Question

Benötige ich einen Container, der extra breit ist und die Elemente auf Inline-Display oder Float oder ähnliches setzt? Was ist, wenn ich zwei Reihen mit jeweils 50% Höhe habe?

Was ist, wenn die Anzahl der Elemente nicht festgelegt ist? Wie ermittelt man die Containerbreite?

Es scheint sehr schwer mit div. Muss ich den Tisch benutzen?

Auch scheint es in reinem css sehr schwierig zu sein, da es verwirrend und schwer ist, die relative Breite und Höhe gleichzeitig zu kontrollieren. Muss ich JS benutzen?

Was ist die einfachste und eleganteste Art, dies zu tun?

Answer 1

Klingt sehr ähnlich wie Sie das CSS-Attribut verwenden möchten: Flexbox

Mit flex-Box, können Sie die maximale und minimale Breite und Höhe und die max definieren/min Anzahl der Elemente, bevor sie auf eine neue Linie fallen.

Das Schöne daran ist, Sie lassen den Browser Breiten berechnen, Sie definieren nur die Max, Min, Margen und Padding.

Und das alles CSS, benötigt kein Javascript

bei CSS Tricks bei den Beispielen Werfen Sie einen Blick und ein Stück über mit ihm. Dieser Link ist relativ alt, sodass einige der Anbieterpräfixe möglicherweise nicht mehr benötigt werden.

Hoffe, das hilft!

EDIT: Zusätzliche Informationen über das Flex-Attribut können bei Mozilla

Answer 2

wäre der einfachste Weg,

Sie verwenden Mauerwerk (http://masonry.desandro.com/) sein säumen Ihren divs horizontal nach oben, aber Sie werden auf Probleme stoßen, wenn sie, wie sie einmal wie Stufen zu taumeln beginnen würde, nicht über eine festgelegte Höhe müssen sie erstrecken sich auf die zweite/dritte Zeile etc ...