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

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

  • Hallo,


    ich hab ein ähnliches Problem.

    Und zwar schaffe es nicht meine Absätze in dem jeweiligen Block mit Zeilenumbrüchen zu zentrieren.


    während die Überschriften so wie die Auflistungen sich mit Umbrüchen zentrieren, laufen die Absätze einfach weiter.


    Das ganze ist eine Übungsseite mit der ich mir HTML im eigenversuch beibringen möchte, bis jetzt konnte ich mir mit viel mit Google helfen, aber hier finde ich den Fehler nicht.


    Ich hoffe einer von euch kann mir vielleicht helfen, oder sieht was ich falsch mache.


    Danke für eure Hilfe.





    <section id="main">
        <article>
            <h2> das ist ein Artikel</h2>
            <img src="kolibri.png.png">
            <p>pppppppppppppppppppppppppppppppp</p>
            <p>ppppppppppppppppppppppppppppppp</p>
            <p>pppppppppppppppppppppppppppppppp</p>
            <p>pppppppppppppppppppppppppppppppp</p>
        </article>
        <aside>
            <section>
                <h2>noch ei Artikel</h2>
                <ul>
                    <li>ein spanender sehr sehr sehr artikel</li>
                    <li>ncoh einer</li>
                    <li>und noch einer</li>
                </ul>
            </section>
            <section>
                <h2>noch eine sehr sehr sehr spanende Überschrift</h2>
                <p>pppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p>
            </section>
            <section>
                <h2> und wirklich noch eine section</h2>
                <ul>
                    <li>baaaaaa</li>
                    <li>baaaaaa</li>
                    <li>baaaaaa</li>
                    <li>baaaaaa</li>
                    <li>baaaaaa</li>
                </ul>
            </section>
        </aside>
    </section>

    CSS:

    #main{
        display: block;
        width: 96%;
        max-width: 980px;
        margin: 1.25em auto;
        padding: 0em;

    }
    #main article {
        display: inline-block;
        width: 65.3%;
        background: #ffffff;
        vertical-align: top;
        margin: 0em;
        padding: 0em;
        text-align: center;
    }
    #main article img{
        max-width: 560px;
        box-shadow: 0px 0px 10px -5px #4c4948;
        border-radius: 5px;
    }
    #main aside{
        display: inline-block;
        width: 30.6%;
        margin-left: 3%;
        padding: 0em;
        vertical-align: top;
    }

    #main aside section{
        display: block;
        margin-bottom: 1.563em;
        background:#ffffff;
        border-bottom: 0.188em solid #e7590b;
    }

  • Und zwar schaffe es nicht meine Absätze in dem jeweiligen Block mit Zeilenumbrüchen zu zentrieren.


    während die Überschriften so wie die Auflistungen sich mit Umbrüchen zentrieren, laufen die Absätze einfach weiter.

    Hi casco,


    was genau meinst du mit "mit Zeilenumbrüchen zentrieren"?


    Meinst du den einen langen Absatz unter der "sehr spannenden Überschrift", das er über die Box hinausgeht?

    Falls ja, dann verwende

    overflow-wrap: break-word;


    Oder meinst du, das sich alle Elemente in der jeweiligen Box zentrieren?

    Bei mir sind in deinem Code nur die Elemente in der ersten Box zentriert, die anderen nicht...


    Das geht übrigens viel bequemer mit Flexboxen.

    Außerdem kannst du die section mit der ID "main" ruhig durch das main-Tag ersetzen...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!