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

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

News title

Sample text sample text sample text sample text sample text sample text.

News title

Sample text sample text sample text sample.

News title

Sample text sample text sample text sample text sample.

.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. Вот что получилось:

News title

Sample text sample text sample text sample text sample text sample text.

News title

Sample text sample text sample text sample.

News title

Sample text sample text sample text sample text sample.

.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 — создаем обычную таблицу, в которой есть ячейки для новостных блоков и ячейки-разделители, которые заменят отступы между основными блоками.

News title

Sample text sample text sample text sample text sample text sample text.

News title

Sample text sample text sample text sample.

News title

Sample text sample text sample text sample text sample.

.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” в поисковике). Что лучше подходит в каждом конкретном случае, решать вам.




Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.