Ich möchte 3 Bilder mit zugehöriger Beschriftung nebeneinander anzeigen lassen, sofern genug Platz vorhanden ist. Reicht die Bildschirmbreite nicht für alle drei aus, soll das nicht mehr passende Bild in die nächste Zeile ausweichen. Also eine klassische Inline-Darstellung, sofern ich dieses Konzept richtig verstanden habe. Nach diesen drei Bildern soll dann aber auf jeden Fall ein Zeilenumbruch erfolgen, also quasi ein neuer Block losgehen.
Das hier ist mein Ansatz:
HTML:
<p class="meinabsatz">
<figure class="meinefigure">
<img src="bild1.jpg"/>
<figcaption>Beschriftung Bild 1</figcaption>
</figure>
<figure class="meinefigure">
<img src="bild2.jpg"/>
<figcaption>Beschriftung Bild 2</figcaption>
</figure>
<figure class="meinefigure">
<img src="bild3.jpg"/>
<figcaption>Beschriftung Bild 3</figcaption>
</figure>
</p>
Alles anzeigen
CSS:
Die Idee war: Der p-Absatz sollte doch eigentlich insgesamt als Block-Element dargestellt werden und somit nach seinem Ende einen Zeilenumbruch erzwingen. Tut er aber leider nicht, selbst dann nicht, wenn ich der Klasse "meinabsatz" explizit noch die Eigenschaft "display: block;" zuweise.
Die Figures werden an sich so dargestellt wie ich das möchte. Aber nach dem dritten Bild erfolgt kein Zeilenumbruch, sondern der darauf folgende Content, in dem Fall die nächste H2-Überschrift, wird auch noch in der selben Zeile dargestellt.
Wie kann ich das verhindern?
Sorry falls die Frage doof ist oder der Ansatz komplett falsch.
Danke für eure Hilfe!