Вложенные плавающие блоки

Оцените материал
(0 голосов)

Здравствуйте! Продолжаем разбираться с версткой страницы на CSS и в этой статье я расскажу о плавающих блоках. Нередко встречается ситуация, когда к вложенным  в обтекающий блок элементам также применяется обтекание. Например, блок основного содержимого может включать блок собственно содержимого и блок меню. В принципе к таким блокам будут применяться все те же правила, что были рассмотрены ранее.

 

Определим сначала последовательно все блоки веб-страницы:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            div{
                margin: 10px;
                border: 1px solid black;
                font-size: 20px;
                height: 80px;
            }
            #header{
                background-color: #ccc;
            }
            #sidebar{
                background-color: #bbb;
                float: right;
                width: 150px;
            }
            #main{
                background-color: #fafafa;
                height: 200px;
                margin-right: 170px;
            }
            #menu{
                background-color: #ddd;
            }
            #content{
                background-color: #eee;
            }
            #footer{
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div id="header">Шапка сайта</div>
        <div id="sidebar">Правый сайдбар</div>
        <div id="main">
            <div id="menu">Меню</div>
            <div id="content">Основное содержимое</div>
        </div>
        <div id="footer">Футер</div>
    </body>
</html>

Просмотреть  пример

Теперь применим обтекание к блоку меню:

#menu{
    background-color: #ddd;
    float: left;
    width: 160px;
}
#content{
    background-color: #eee;
    margin-left: 180px;
}

Опять же у плавающего элемента, коим является блок меню, устанавливаются свойства float и width. А у обтекающего его блока content устанавливается отступ слева.

Аналогично можно сделать блок меню справа:

#menu{
    background-color: #ddd;
    float: right;
    width: 160px;
}
#content{
    background-color: #eee;
    margin-right: 180px;
}

Прочитано 632 раз Последнее изменение Суббота, 03 сентября 2016 12:23
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+