Фиксированная блочная верстка в 3 колонки разной высоты на DIV
Верстка
Фиксированная блочная верстка в 3 колонки разной высоты на DIVВ прошлых материалах мы рассматривали резиновую блочную верстку в три колонки разной высоты и табличную верстку в три колонки. Оба этих каркаса могут менять свою ширину в зависимости от размера родительского окна. Но не всегда на странице нужна резиновая верстка. Скажем, нужно сделать страницу шириной в 1024 пикселя, которая будет располагаться по центру окна. В этом случае вполне подойдет фиксированная верстка в три колонки, о которой мы и поговорим далее.
Как и в предыдущих материалах взвесим все "за" и "против" подобного каркаса.
Плюсы
- Семантическая разметка. Вы всегда можете самостоятельно решить, в какой колонке что будет размещено. Ширина каждой колонки выбирается на ваше усмотрение.
- Синхронная загрузка структуры страницы. Все колонки загружаются единовременно.
- Возможнось с легкостью менять дизайн через стили.
- В параметрах ширины колонок можно указать размеры как в пикселях, так и в процентах.
- Минимум кода.
Минусы
- Разная высота колонок.
Основной каркас такой верстки:
Колонка 1
</div>
<div class="col2">
Колонка 2
</div>
<div class="col3">
Колонка 3
</div>
<br class="clear">
К этому каркасу привязываем следующие стили:
col1{
float: left; /* делаем элемент плавающим и смещаем влево */
width: 200px; /* задаем ширину левой колонки */
background: #f00;
}
col2{
float: left; /* делаем элемент плавающим и смещаем влево */
width: 400px; /* задаем ширину центральной колонки */
background: #0f0;
}
col3{
float: left; /* делаем элемент плавающим и смещаем влево */
width: 250px; /* задаем ширину правой колонки */
background: #00f;
}
clear{
clear: both; /* отменяем обтекание */
font-size: 1px;
}
</style>
Вот рабочий пример фиксированной блочной верстки в 3 колонки разной высоты на DIV:
(навигация)
(основной материал)
(форма регистрации, баннеры)
На этом, пожалуй, все.
Удачи в свершениях!
Не по теме. Немного юмора. Отвлечёмся!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Фиксированная блочная верстка в 3 колонки разной высоты на DIV
Верстка
Скрипты, инструкции, справочники
| Категория: | Верстка |
| Просмотрено: | 14149 |
| Рейтинг: | 5.0/3 |
| Дата добавления: | 2013-11-16 11:51, Суббота |
| Добавил: | Szen |
| Теги: | блочная верстка, 3 колонки, блоки, верстка на DIV, фиксированная, колонки |
Рекомендуем
Дополнительно к Фиксированная блочная верстка в 3 колонки разной высоты на DIV
Мини-форум
| № 0 | 2013-11-16 11:51 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Фиксированная блочная верстка в 3 колонки разной высоты на DIV". |
| Гость |
