Mehrere Inline-Elemente in einem Block?

  • 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:





    CSS:


    Code
    1. .meinefigure {
    2. float: left;
    3. }
    4. .meinabsatz {
    5. overflow: auto;
    6. }



    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!

  • figure-Elemente innerhalb von p-Elementen sind mindestens schlechter Stil, wenn nicht sogar unzulässig nach den HTML-Regeln. Verwende besser article, section, aside, ... oder notfalls auch div-Container.


    float vererbt sich ohne ein Clearing gandenlos weiter und hebt die gefloateten Elemente aus dem Textfluß. Zudem ist es für dein Anliegen überhaupt nicht gedacht. Beschäftige dich mit Flexbox (display: flex) oder CSS-Grid (display: grid).


    Ohne die Bilder und den zugehörigen Text ist konkrete Hilfe leider nicht möglich. Ich würde es nach deiner Beschreibung mit CSS-Grid und minmax versuchen.

  • 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?

  • Keine Ahnung ob Probleme entstehen. Das hängt von deiner fertigen Seite ab, die ich nicht kenne. Das musst du also selbst ausprobieren.


    Die Erfahrung zeigt: Je komplexer eine Seite wird desto wahrscheinlicher sind Probleme mit float, zumal wenn es ohne Kenntnis der Auswirkungen verwendet wird. Wenn deine Seite relativ einfach ist sind Probleme eher unwahrscheinlich.

  • 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!