Aloha ;)

Full ACK und +1, außer...

Und gib den div zum Testen mal einen kräftigen Rahmen, zum Beispiel "div {border: 3px solid blue;}". Dann kannst du auch sehen, wie groß die div überhaupt sind und das Bilder sich korrekt in ihnen befinden.

Zum Erstellen von Seiten sollte man überhaupt viel mit kräftigen Rahmen und Hintergrundfarben arbeiten, um die Größe von Containern konkret sehen zu können.

So war das vor 5-10 Jahren. Der Webentwickler von heute benutzt die browsereigenen Entwicklertools. Die geben den genaustmöglichen Aufschluss über Containergrößen ohne nachteilsbehaftet zu sein. Dicke Rahmen dagegen sind problematisch, weil sie das Layout vollkommen verhauen können, da sie (im Standard-Boxmodell) nicht zur width und height gehören, sondern dazuaddiert werden.

Zudem solltest du von Anfang an auf die Semantik achten. Für Bilder mit einem zugehörigen einfachen Text sind das figure-Element und das figcaption-Elment gedacht. Die vielen unnützen div wie in deinem Beispiel ergeben keinen Sinn und sollten weggelassen werden, Stichwort: "divitis".

Der ist auch nett, ich kannte bisher nur divsuppe :D

Grüße,

RIDER