[Seeker_44]

Hallo miteinander

Ich versuche seit Stunden, eine Bildergalerie in reinem CSS zu kreieren, deren Thumbnails über die ganze Breite des Viewports verteilt sind und die auf "display:inline-block" eingestellt sind, damit sie automatisch auf die jeweils nächste Zeile umbrechen, sobald der Viewport schmaler wird.

Die Thumbnails sollen linksbündig sein. Jedoch soll der gesamte Thumbnail-"Block" horizontal zentriert im Viewport dargestellt werden, was ich partout nicht schaffe.

Ich habe dem Body "text-align:left" zugewiesen und das Wrapper-Element auf "display:inline" gestellt, damit es eingemittet dargestellt wird und nicht 100% des Eltern-Elements einnimmt, sondern nur gerade so breit ist, wie die Thumbnail-Reihen.

Siehe hier: https://jsfiddle.net/ta6bue2o/2/

Leider kann ich diesem Wrapper-Element kein "text-align:left" zuweisen – es ist schlichtweg wirkungslos. :(

Folgende Alternativen habe ich schon erfolglos versucht:
- Display:Table (mit und ohne display:table-cell in Kombination)
- Position:absolute (mit "left:50%" und über "translate(-50%, 0)" den Minuswert)
- Display:inline-block
- Float:left

Entweder waren diese Alternativen nicht geeignet für die Lösung meines Problems oder ich habe sie falsch angewendet.

Irgendwie müsste es zu schaffen sein, dass der Wrapper auf der untersten Zeile gleich lang ist, wie auf den darüberliegenden Zeilen, damit die darin enthaltenen roten Quadrate linksbündig dargestellt werden, ohne dass der ganze Wrapper auf die linke Seite des Viewports "rutscht".

Da ich mich mit JS nicht auskenne, wäre eine CSS-Lösung ideal!

Hat jemand einen Rat für mich?

[m]

[hadouken]

Es geht nicht.

text-align kann nur auf block-container angewendet werden. inline erzeugt keinen block-container.
inline-block erzeugt einen block-container, seine Breite errechnet sich aber vorm auto. Umbruch des contents.
Ist also größer als sein content. Mit justify-content und flex verhält es sich genauso.

Die einzige Lösung ist die maximal mögliche Anzahl von Elementen pro Zeile zu ermitteln und genau soviele Elemente mit korrekter Breite aber height: 0 (oder sonstwie optisch versteckt) ans Ende zu stellen.

[Seeker_44]

@ hadouken:

Danke für deine ausführliche und einleuchtende Antwort. Es schien mir ein so simples Problem zu sein, dass ich mir einbildete, CSS schafft das locker. Aber es ist vermutlich doch komplizierter ...

[l8rdude]

Dein Post hat mich neugierig gemacht...

Entweder habe ich die Fragestellung nicht zu 100% verstanden, oder aber es ist genau so simpel wie du dir es vorgestellt hast: https://codepen.io/zerfl/full/ea068870e66a65cdeaf1d02e9fb0ceb0/ (Der Container hat zur 'center'-Veranschaulichung ein max-width gesetzt).

Grüße,

[hadouken]

Yoah, Internet Explorer mag halt nicht so richtig mitspielen aber ansonsten nice

Allerdings mit