2 способа создания равных по высоте блоков с помощью CSS

Задача: необходимо сверстать несколько блоков, равных по высоте и расположенных в одну линию, при этом высота блока неизвестна. Типичный случай — несколько блоков новостей с разным количества текста в каждом. Если мы не указываем значение высоты для блоков, то предсказуемо получим «ассиметричную» структуру следующего вида:

.blocks-container {
width: 100%;
display: inline-block;
margin: 10px 0 20px;
clear: both;
}

.block-inline {
float: left;
width: 200px;
margin-right: 10px;
padding: 10px;
background: #D2F1FC;
border-radius: 2px;
}

.block-inline h4,
.block-inline p,
.block-news h4,
.block-news p {
margin: 0 0 10px;
}

Первый и самый, пожалуй, простой способ заставить соседние блоки «тянуться» на равную высоту – с помощью css сымитировать таблицу. Для этого мы присвоим контейнеру правило display: table-row, а его «ячейкам», то есть нашим новостным блокам – display: table-cell. К сожалению, свойство margin в случае с table-cell не работает, поэтому мы также сымитируем его, введя пустой блок .block-empty. Вот что получилось:

.equal-blocks-container {
display: table-row;
}

.equal-blocks-container .block-inline {
display: table-cell;
width: 200px;
margin-right: 10px;
padding: 10px;
background: #D2F1FC;
border-radius: 2px;
}

.block-inline h4,
.block-inline p,
.block-news h4,
.block-news p {
margin: 0 0 10px;
}

.equal-blocks-container .block-empty {
width: 10px;
}

То, что нужно! Однако данное решение не будет работать в IE 7, поэтому для лучшей кроссбраузерности можно не имитировать таблицу, а просто ее использовать вместо блочной структуры.




 

Способ 2 — создаем обычную таблицу, в которой есть ячейки для новостных блоков и ячейки-разделители, которые заменят отступы между основными блоками.

.equal-blocks-table {
width: auto;
}

.equal-blocks-table .block-inline {
width: 200px;
padding: 10px;
vertical-align: top;
background: #D2F1FC;
}

.block-inline h4,
.block-inline p,
.block-news h4,
.block-news p {
margin: 0 0 10px;
}

.equal-blocks-table .block-empty {
width: 10px;
padding: 0;
}

Результат аналогичный и при этом работающий в старых IE (если конечно, есть такая потребность). Помимо перечисленных CSS-способов, можно также воспользоваться многочисленными решениями с помощью Javascript и jQuery (например, по запросу “div equal height” в поисковике). Что лучше подходит в каждом конкретном случае, решать вам.




Источник