Boxen umsetzten

[Rolf B]

Hallo Bernd,

oookay - ein Bild sagt mehr als 1000 Worte und die 1000 Worte deines Eingangspostings haben mich verwirrt. Ich dachte, du WOLLTEST die Texte direkt unter den Bildern haben.

Deine position:absolute Lösung ist ein Workaround. Wenn Du dabei bleiben willst, dann:

• kein min-height für die figure, sondern einen vergrößertes padding-bottom in das die Caption hineinpasst (z.B. so: padding: 1em 1em 3em 1em)
• statt padding-bottom auf der figcaption einfach die bottom-Eigenschaft auf 0.5em setzen.
• flex-direction:row auf der figure kann dann weg (ist bestimmt nur ein Bastel-Relikt...)

Mit dieser Verbesserung können die Bilder so hoch werden wie sie wollen, die Caption bleibt immer darunter.

Aber besser ist wohl, wenn jedes figure-Element ist nicht nur flexitem, sondern auch selbst flexbox ist, aber mit flex-direction:column und justify-content: space-between. Der figcaption gibst Du flex: 0 0 1em, dem img ein flex: 1 0 1em. Absolute Positionierung ist ein unnötiger Workaround.

Hätte ich mal besser in der Schule aufgepasst, dann hätte ich auch Lesen gelernt. Statt dessen habe ich zu viele Comics angeguckt, scheint mir 😉

Mein Fork:

https://codepen.io/anon/pen/bZERob?editors=1100

Rolf