Дизайн и бизнес в Беларуси

Верстка колонок одинаковой высоты

Сорренто

После Сорренто, сразу за поворотом, мир меняется. Вот оно, божественное побережье «Коста дивина». Одна из живописнейших дорог мира Амалфитана — извивается по уступам Позитано, края пастельных грез.
Верстка колонок одинаковой высоты

Удачная планировка ванной комнаты

Даже в маленьком помещении чувствуешь себя комфортно, когда пространство использовано грамотно.
Верстка колонок одинаковой высоты  интерьр английской классики

Коктейль из английской классики и гламура в интерьре

Спасая хозяев от надоевшего евроремонта, автор интерьера Ольга Кудрявцева обошлась одним только декорированием. Создала коктейль из английской классики и гламура. И сделала это с присущим ей артистизмом.
Верстка колонок одинаковой высоты  декор потолка

Великий декор потолка современности

Размышляем о высоком, смотрим вверх. мысленно возносимся к небесам, разглядывая церковные росписи — трубящих ангелов в окружении небесных сфер.
Верстка колонок одинаковой высоты  Японский антиквариат

Японский антиквариат

Осмысленный вывоз японского антиквариата в Европу начался со второй половины XIX века. Французские импрессионисты открыли красоту японского колорита, и с тех пop все японское традиционно считается изысканным и модным.
Верстка колонок одинаковой высоты  Японское кимоно

Японское кимоно

Даже современные кимоно могут считаться коллекционными. Если провинции, которые специализируются на определенных и очень дорогих тканях как, например, знаменитая парча Киото. В северных провинциях делают конопляную одежду с вышивками и рисунками.
Верстка колонок одинаковой высоты

Девичий однобэдрум с лодкой

Молодая хозяйка с легкостью пожертвовала пятью комнатами ради пространства. Получился девичий однобэдрум.
Верстка колонок одинаковой высоты  Спа-дом

Спа-дом

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

Приют коммунаров - ирландский дом

Один из членов коммуны сделал свое жилище двухуровневым. На первом расположились кухня и гостиная. На второй надо забираться по вертикальной лестнице без перил.

Верстка колонок одинаковой высоты

Сверстать колонки одинаковой высоты очень просто с помощью таблицы, но табличная верстка уступила свое место более гибкой блочной. Предлагаем вашему вниманию способы блочной верстки для создания колонок одинаковой высоты.

Наша цель

До
После
Верстка колонок одинаковой высоты
Верстка колонок одинаковой высоты

Верстка колонок одинаковой высоты при помощи свойства display: table

Для создания макета можно использовать списки (ul) или блок div с вложенными в него блоками для строки и каждой из колонок. Обрамляющему блоку div присваивается значение display: table, а каждому вложенному блоку-колонке значение display: table-cell.

Рассмотрим пример со списком.

Это наиболее простой и легкий способ создания колонок одинаковой высоты, в отличие от других методов.

Внешний отступ (margin, как cellspacing для таблиц) равный для всех колонок создать не получится, однако, его можно заменить границей белого цвета (или цвета фона колонки) с соответствующей шириной для имитации отступа.

Этот метод не работает в браузерах IE7 и ниже.

 

HTML код:

<div class=”out”>
<ul class=”outul”>
<li class="cell1"><div class="content1" >Левая колонка </div></li>
<li class="cell1"><div class="content2">Центр</div></li>
<li class="cell1"><div class="content3">Правая колонка</div></li>
</ul>
</div>

CSS:

.out { width: auto; margin-left: 0px; margin-right: 0px; min-width: 1000px; padding: 0px; display:table; }

.outul { Display: table-row; }

.out li { display: table-cell; width: 33%; }

.cell1 { left-settings; }

.cell2 {central-settings; }

.cell3 { right-settings; }

Верстка колонок одинаковой высоты при помощи JavaScript

Этот метод основан на использовании небольшого JS кода (JQuery), который «расставляет» нужную высоту каждой колонке на основе высоты наиболее длинной из них. Все JS лучше класть в один файл для минимизации обращений к серверу или непосредственно в HTML код.

Этот способ работает во всех браузерах, но если JavaScript будет отключен, колонки не будут равной высоты..

HTML код:

<div class=”container”>

<div class=”leftsidebar”>Левая колонка </div>

<div class=”content”>Центр</div>

<div class=”rightsidebar”>Правая колонка</div>

</div>

CSS:

.container { Width: 900px; Margin-left: auto; Margin-right: auto; }

.leftsidebar { Float: left; Width: 33%; }

.content { Float: left; Width: 33%; }

.rightsidebar { Float: left; Width: 33%; }

JavaScript ( jQuery):

function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($(".container > div")); });

 

Верстка искусственных колонок одинаковой высоты

Обрамляющему блоку присваивается фон, имитирующий колонки. Они просто накладываются на этот фон. Эффект равной высоты создается за счет повторяющегося фона. Однако, этот метод эффективен только для фиксированного дизайна.

HTML код:

<div class=”container”>

<div class=”left”>Левая колонка</div>

<div class=”content”>Контент</div>

<div class=”right”>Правая колонка</div>

<div class=”spacer”></div>

</div>

CSS:

.container { background-image: img.png; background-repeat: repeat-y; width: 900px; margin-left: auto; margin-right: auto; }

.leftsidebar { float: left; width: 200px; }

.content { float: left; width: 400px; }

.right { float:left; width: 300px; }

.spacer { clear: both; }

 

Способ 4: использование раздельных блоков с фоном

Этот способ основан на использовании раздельных блоков div, каждый из которых имеет свой фон и принимает значение высоты элемента, который он включает.

HTML код:

<div class=”rightback”>

<div class=”contentback”>

<div class=”leftback”>

<div class=”leftsidebar”>Левая колонка </div>

<div class=”content”> Контент </div>

<div class=”rightsidebar”>Правая колонка</div>

</div> </div> </div>

CSS:

.rightback { width: 100%; float:left; background-color: green; overflow:hidden; position:relative; }

.contentback { float:left; background-color:blue; width: 100%; position:relative; right: 300px; /* ширина правой колонки*/ }

.leftback { width: 100%; position:relative; right: 400px; /* ширина контента*/ float:left; background-color: red; }

.container { width: 900px; margin-left: auto; margin-right:auto; }

.leftsidebar { float:left; width: 200px; overflow:hidden; position:relative; left: 700px; }

.content { float:left; width: 400px; overflow:hidden; position:relative; left: 700px; }

.rightsidebar { float:left; overflow:hidden; width: 300px; background-color:#333; position:relative; left: 700px; }

Основные моменты:

  1. .rightback, .contentback, и.leftback содержат элементы .leftsidebar, .content и .rightsidebar, которые, в свою очередь, содержат текст.
  2. Каждый из вложенных блоков отвечает за цвет/фон колонки. В данном примере
    .leftback соотвествует.leftsidebar,
    .contentback – .content
    и .rightback – .rightsidebar.
  3. Кроме последнего (отвечающего за правую крайнюю колонку), каждому из блоков <div> задан отступ справа, равный ширине элемента, прилегающего справа, который содержит фон. В данном примере .contentback (отвечающего за фон .content) сдвинут влево на 300px (что является шириной блока .rightsidebar).
  4. Колонки .leftsidebar, .content и .rightsidebar расположены друг за другом с определенной шириной.
  5. Они обеспечивают отступ слева равный сумме ширины каждой из колонок, кроме крайней правой. Т.е. они равны = ширина .rightsidebar (300px) и .content (400px) = 700px.( B+G)

На рисунке ниже изображено как располагаются блоки .rightback, .contentback и.leftback. Крайний слева – .rigthback, крайний справа - .leftback.

Верстка колонок одинаковой высоты

Пунктирная линия показывает видимую область колонок (блок .rightback обрезан с помощью overflow: hidden).

На картинке ниже, черные линии, расположенные ниже красной – это контент элементов <div> .leftsidebar, .content и .rightsidebar, если им задано свойство float:left и соответствующая ширина.

Все 3 элемента имеют смещение слева от C, с помощью relative position.
C = B+G

Верстка колонок одинаковой высоты

Каждый из методов имеет свои преимущества и недостатки, но, самый лучший - последний метод, который позволяет создать колонки равной высоты, работающие в любом браузере и без JS.

 

Каждый должен заниматься своим делом, и если вы не планируете продолжать заниматься веб-дизайном или версткой, доверьте это дело профессионалам - Создание сайтов от московской студии Evart - здесь можно заказать как готовый сайт, так и создание сайта под заказ. Кроме того, студия работает в сфере графического дизайна и создает изумительные иллюстрации.

Дизайн » Веб дизайн » Верстка сайта » Верстка колонок одинаковой высоты

Пару слов о верстке сайтов

Правильная структура кода интернет страниц, является одной из основ будущей успешности интернет-сайта.
Верстка колонок одинаковой высоты  Верстка колонок одинаковой высоты

Верстка колонок одинаковой высоты

Предлагаем вашему вниманию способы блочной верстки для создания колонок одинаковой высоты

Adobe CS4 beta версия: Dreamweaver, Fireworks и Soundbooth

Точная дата выпуска Creative Suite 4. Adobe предоставляет для тестирования бета версии продуктов
Хостинг в Беларуси Новостная лента Добавить компанию Поиск Карта сайта

© diz-by.biz - Все направления дизайна на одном сайте