Блочная верстка (3 колонки)

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

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

<!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;
            }
            #leftSidebar{
                background-color: #ddd;
            }
            #rightSidebar{
                background-color: #bbb;
            }
            #main{
                background-color: #eee;
                height: 200px;
            }
            #footer{
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div id="header">Шапка сайта</div>
        <div id="leftSidebar">Левый сайдбар</div>
        <div id="rightSidebar">Правый сайдбар</div>
        <div id="main">Основное содержимое</div>
        <div id="footer">Футер</div>
    </body>
</html>

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

 

 

Здесь опять же код обоих сайдбаров должен идти до блока с основным содержимым, который обтекает их.

Теперь изменим стили обоих сайдбаров и основного блока:

#leftSidebar{
    background-color: #ddd;
    float: left;
    width: 150px;
}
#rightSidebar{
    background-color: #bbb;
    float: right;
    width: 150px;
}
#main{
    background-color: #eee;
    height: 200px;
    margin-left: 170px;
    margin-right: 170px;
}

Опять же у обоих плавающих блоков - сайдбаров нам надо установить ширину и свойство float - у одного значение left, а у другого right.

Блочная верстка из трех колонок в CSS3

Прочитано 911 раз Последнее изменение Воскресенье, 28 августа 2016 11:41
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

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

Google+