Bilder gleichmäßig anordnen

[Enrico]

Hallo,

Ich würde das grundsätzlich etwas anders lösen.

Problem: JavaScript ist bei vielen Besuchern blockiert, aus welchen Gründen auch immer.

Deshalb würde ich zunächst ein Layout erstellen, dass grundsätzlich ohne JS funktioniert. Damit würden die Bilder bei jedem Besucher sinnvoll strukturiert angezeigt werden, egal ob sein Browser JS zulässt oder blockiert. Auch wenn das nicht deinen strengen ästhetischen Regeln entsprechen mag. Da hat jeder Besucher 'eh seine eigenen Vorstellungen.

Mit dem JS würde ich dann nur die Anzahl der Bilder (oder in meinem Fall der figure-Elemente) berechnen und davon abhängig das CSS durch das JS anpassen.

Aber ohne JS ist es doch gar nicht möglich, dass der Bildercontainer genau so groß wird wie der Inhaltscontainer, oder? Das heißt, ich müsste eine Höhe im Vorfeld festlegen - die dann wahrscheinlich nicht passt, aber dadurch werden die Bilder nicht so groß wie sie wollen, richtig?

Beispielsweise:

Ich würde grundsätzlich zwei Bilder nebeneinander anzeigen, egal wie viele wirklich vorhanden sind.

Versteh ich nicht ganz, wie soll ich "grundsätzlich zwei Bilder" anzeigen, wenn nur 1 da ist?

Das CSS dazu könnte folgendermaßen aussehen (zur besseren Übersicht zeige ich nur den CSS-Teil, der durch JS angepasst werden muss):

flex-basis: calc((100% / 2) - 1rem);

Wenn nur ein Bild / figure-Element vorhanden ist müsste das CSS folgendermaßen lauten:

flex-basis: calc((100% / 1) - 1rem);

Bei drei Bildern / figure-Elementen:

flex-basis: calc((100% / 3) - 1rem);

und bei vier Bildern / figure-Elementen:

flex-basis: calc((100% / 2) - 1rem);

Wofür steht das "1rem"? Einfach als Abstand zwischen den Bildern?
Aber bei 4 Bildern würde das doch dennoch die Containerhöhe sprengen...

Also ich habe es jetzt ganz ohne Flexbox gelöst. Hier.

Ich hätte dazu noch zwei CSS-Fragen zu vertical-align: Warum rutscht der Inhaltscontainer nach unten, wenn ich beim Bildercontainer und beim Inhaltscontainer vertical-align: top ausschalte? Und warum bei 4 Bildern zwischen der oberen und der unteren Hälfte ein freier Streifen bleibt und ich deswegen den Bildern vertical-align: middle (oder top) geben muss, damit er verschwindet.

Enrico