Контейнер не применяет цвет фона ко всем плавающим элементам внутри него.

Я хочу добавить цвет фона в контейнер с тремя плавающими объектами класса div внутри: один вверху и два рядом под ним. Когда я добавляю цвет фона в контейнер .site-container в CSS, он добавляет цвет фона только в div class=top. Как я могу получить фон, который будет охватывать div class=left и right? Спасибо! Вот мой CSS-код:

      body{
    background-color:white;
}

.site-container{
    width:70%;
    margin:auto;
    margin-top:200px;
    background-color: blue;

}

.clr{
    clear:both;
}

.left{
    float:left;
    width:50%;
}

.right{
    float:right;
    width:50%;
}

HTML-код:

       <body>
        <div class="site-container">
            <div class="top">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia deleniti odio quae eligendi ab voluptatibus eos praesentium, eaque repellendus, nulla nostrum voluptate sit voluptates officia explicabo cum laboriosam dolorem architecto.</p>
            </div>
            
            <div class="left">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ex amet voluptates nemo libero aliquid aperiam tempore error ratione molestiae, voluptate rerum eaque vero! Quibusdam corporis quidem dolorum eum aliquam.</p>
            </div>
            

            <div class="right">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error, pariatur, temporibus officiis doloribus atque hic deleniti officia dolorem sit optio magni facilis laborum, quos doloremque quasi laudantium vero! Adipisci, voluptates!</p>
            </div>

        </div>

    </body>

Я переключил положение поплавка и не знаю, что еще делать... очень новичок!

Источник

0 ответов

Другие вопросы по тегам