Alles klar. Habe das jetzt mal so gemacht und im Moment scheint zumindest in Safari und Firefox alles wie gewünscht zu funktionieren. Werde das jetzt mal so beibehalten und bei Gelegenheit noch ein bisschen mehr Cross-Browser-Testing machen.
Nochmals vielen Dank für die Hilfe!
Macht ein "clearfix" hier eventuell Sinn?
.meinabsatz:after {
content: "";
display: table;
clear: both;
}Vielen Dank für die schnelle und kompetente Antwort!
Das Ändern von <p> zu <div> hat das Problem eigentlich offenbar bereits komplett gelöst. Sollte ich trotzdem versuchen, das ganze auf andere Weise zu lösen? Entstehen durch diese "unsachgemäße" Läsung von "float" irgendwelche Probleme?
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>CSS:
.meinefigure {
float: left;
}
.meinabsatz {
overflow: auto;
}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!