Как сделать блоки для сайта html

fourmethodsbanner
Раньше, когда все верстали с использованием таблиц, создать колонки одинаковой высоты было очень просто.  Достаточно создать таблицу, например, с 3мя колонками и все они автоматически будут иметь одинаковую высоту.  Но в блочной верстке не все так просто.
В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.
Равная высота

Способ 1. Использование свойства display: table


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

<div class=”base”>
<ul class=”base-row”>
<li class="cell1"><div class="content1" >.....Lots of Content....</div></li>
<li class="cell1"><div class="content2">.....Lots of content....</div></li>
<li class="cell1"><div class="content3">.....Lots of content....</div></li>
</ul>
</div>


CSS:

.base {
/make it 100% width and a minimum of 1000px width/
width: auto;
margin-left: 0px;
margin-right: 0px;
min-width: 1000px;
padding: 0px;
display:table;
}
.base-row {
Display: table-row;
}
.base li {
display: table-cell;
width: 33%;
}
.cell1 {
background-color: #f00;
}
.cell2 {
background-color: #0f0;
}
.cell3 {
background-color: #00f;
}


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


Преимущества:


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

Недостатки:


Этот метод не работает в браузерах IE7  и ниже. Пройдет немало времени (когда IE7 станет новым IE6), прежде чем мы сможем без опаски использовать этот метод.

Способ 2: Использование JavaScript


Этот метод основан на использовании небольшого JS кода (JQuery), который “расставляет” нужную высоту каждой колонке на основе высоты наиболее длинной из них.
HTML код:

<div class=”container”>
<div class=”leftsidebar”> … Lots Of Content … </div>
<div class=”content”> …. Lots Of Content … </div>
<div class=”rightsidebar”> … Lots Of Content … </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"));
});


Вы можете положить JS код в отдельный файл и вызвать его непосредственно в  HTML коде. В этом случае, инициализация JQuery должна быть по коду расположена выше.
Код, который вам нужно изменить – это название класса блока, который создает колонки. В данном примере это класс container:

.container > div


Вы можете изменить название класса блока с колонками или, даже, добавить класс к каждому блоку-колонке и использовать их раздельно, для удобства.

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


Преимущества:


Главное преимущество метода – он работает во всех браузерах и вам не нужно напрягаться с  CSS кодом для выравнивания высоты.

Недостатки:


Если JavaScript будет отключен, соотвественно, колонки не будут равной высоты. Но, как правило, это очень редкий случай, т.к. большинство современных сайтов требуют включения JS.

Способ 3: искусственные колонки


Этот метод придуман одним из первых для реализации колонок одинаковой высоты. Суть его в том, что обрамляющему блоку присваивается фон, иммитирующий колонки (см. рис. ниже). Они просто накладываются на этот фон. Эффект равной высоты создается за счет повторяющегося фона.
Фон для колонок
HTML код:

<div class=”container”>
<div class=”left”></div>
<div class=”content”></div>
<div class=”right”></div>
<div class=”clearer”></div>
</div>


CSS:

.container {
background-image: tile.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;
}
.clearer {
clear: both;
}


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


Преимущества:


Очень простая реализация.

Недостатки:


Этот метод можно использовать только для макетов/колонок фиксированной ширины.

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


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

<div class=”rightback”>
<div class=”contentback”>
<div class=”leftback”>
<div class=”leftsidebar”>…Lots Of Content…</div>
<div class=”content”> …Lots Of Content…</div>
<div class=”rightsidebar”> …Lots Of Content…</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;    / width of right sidebar /
}
.leftback {
width: 100%;
position:relative;
right: 400px; / width of the content area /
float:left;
background-color: #f00;
}
.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;
}


Выглядит не просто, не так ли? Главное уяснить 5 основных моментов:
  1. .rightback, .contentback, и.leftback содержат элементы .leftsidebar, .content and .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).
На картинке ниже черные линии, расположенные ниже красной – это контент элементов .leftsidebar, .content и .rightsidebar, если им задано свойство float:left и соотвествующая ширина.
Все 3 элемента имееют смещение слева от C, с помощью relative position.
C = B+G
Пояснение к технике
Этот метод подробно описывается в  этой статье.

Посмотреть пример для 3х колоночного макета | Посмотреть пример для 4х колоночного макета


Преимущества:


Метод работает во всех браузерах, включая Internet Explorer 6. Для реализации не требуется JavaScript, он полностью основан на CSS и HTML.

Недостатки:


Метод не так прост, как остальные, однако, он позволяет создать столько равных по высоте колонок, сколько требуется.

Вывод


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

Источник: https://habrahabr.ru/post/64173/


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

4 способа как создать блоки одинаковой высоты / Хабрахабр - Как сделать корм для кур самостоятельно



Как сделать блоки для сайта html Как сделать блоки для сайта html Как сделать блоки для сайта html Как сделать блоки для сайта html Как сделать блоки для сайта html Как сделать блоки для сайта html Как сделать блоки для сайта html Как сделать блоки для сайта html Как сделать блоки для сайта html

ШОКИРУЮЩИЕ НОВОСТИ