Блоки одинаковой высоты. Как сделать?

Блоки одинаковой высоты. Как сделать?

Блоки одинаковой высоты. Как сделать?

» » Сообщение:

Блоки одинаковой высоты. Как сделать?

Собственно, нужно получить вот это:

fourmethodsbanner.jpg

---

Способ №1
Самый простой - Таблица:
HTML код:

Код: Выделить всё Развернуть
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>....Lots of  Content....</td>
<td>....Lots of  Content....</td>
<td>....Lots of  Content....</td>
</tr>
</table>

- о нем и говорить не стоит - все понятно, как день.


Способ №2
Для реализации макета используется список (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;
 }

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

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


Способ №3 + 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

Код: Выделить всё Развернуть
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"));
});

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

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


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

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;
}

Картинка:

articlefct.gif

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

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


Способ №5 + дополнительные блоки для фона
Этот способ основан на использовании раздельных блоков 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;
}

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

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

Еще по теме:
Колонки одинаковой высоты
4 способа как создать блоки одинаковой высоты

блоки одинаковой высоты. как сделать?



Похожие темыКомментарии ПросмотрыПоследнее сообщение
01235Как сделать загрузочную флешку с Wi...
Сообщение от: Admin
2884Re: Дополнительные шрифты к BB-кода...
Сообщение от: SKh
044Как сделать свою шапку для нужных р...
Сообщение от: Admin
305071Re: Как сделать рейтинг материалов ...
Сообщение от: Admin
793945Re: Как сделать.. Не сортированные ...
Сообщение от: waak