Die Hintergrundfarbe eines Artikels, welcher einen Text sowie Bild enthält, sichtbar machen

    Hallo Community!


    Ich bin gerade dabei eine Website zu erstellen und schaffe es nicht, dass ein 'article' vollständig mit einer bestimmten Farbe ausgefüllt ist. In dem article ist ein Bild sowie in Text; beides ist nebeneinander angeordnet.


    Wie bekomme ich also hin, dass der ganze article z.B. die Hintergrundfarbe weiß hat.


    Mein HTML:

    HTML: Article
    <article id="article-one">
            <div class="article-img">
                <img src="Pfad/zum/Bild">
            </div>
            <div class="text">
                <p> Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das                    soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll                    ein langer Text sein. Das heißt ich muss den irgendwie füllen. </p>
            </div>
</article>


    Mein CSS:


    Ich hoffe mir kann jemand helfen.


    Danke im voraus


    Daykoo

    Wie so häufig ist das Anordnen von Elementen mit float die Quelle des Problems und ebenfalls die Verwendung von Flexlayout die Lösung. Dann ist auch die Inflation von div-Containern überflüssig:

    Code
        <article id="article-one">
        <img class="article-img" src="images/dia0.jpg">
        <p class="text"> Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll ein langer
            Text sein.
            Das heißt ich muss den irgendwie füllen. Das soll ein langer Text sein. Das heißt ich muss den
            irgendwie füllen. Das soll ein langer Text sein. Das heißt ich muss den irgendwie füllen. Das soll ein
            langer Text sein. Das heißt ich muss den irgendwie füllen.
        </p>
    </article>
    Code
        article{
        display: flex;
        align-items: center;
        padding: 5em 0;
        background-color: lightblue;
    }
    .article-img{
    }
    .text{
    }

    Zum Verständnis siehe hier:

    https://www.html-seminar.de/css-flexbox.htm

    (Die Farbe habe ich nur geändert, damit sie auf meiner Testseite sichtbar wurde.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden