div одинаковой высоты

Для начала немного разметки:

<div class="same-height">
<div>some stuff</div>
<div>some more stuff</div>
</div>

Задача сдалать блоки внутри одинаковой высоты. Для этого применим чуть-чуть css:

.same-height{

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

 На этом магия закончена.

По утверждениям, данный метод работает во всех адекватных браузерах, отличились только девайсы с IOS на борту. Для них надо городить костыли:

_::-webkit-full-page-media, _:future, :root .same-height {

display:block;

flex-wrap:nowrap;

flex-direction:row;

align-items:inherit;

}

_::-webkit-full-page-media, _:future, :root .same-height>div {

min-height:220px;

}

Свойство min-height указать как максимальная высота блока.

Иеще один нюанс. Если в верстке используется bootstrap, товерстка может сильно поехать и прийдется переписать некоторые стили, вот пример, который работает:

.top-experts >.col-xs-6{

width: 49%;

}

@media (min-width: 768px) {

.top-experts > .col-sm-4 {

width: 33.2%;

}

}

@media (min-width: 992px){

.top-experts>.col-md-2 {

width: 16.6%;

}

}

Как можно понять из кода, с применением flex стали некорректно обрабатываться размеры блоков. По аналогии с приведенным кодом надо дописать стили для остальных классов col-*-*. Значения ширины я подбирал эмпирическим путем, но как правило хватает окркугления цифры дробной части м меньшую сторону.

Оставить комментарий

Поля, отмеченные * обязательны для заполнения.

Введите символы с картинки
Символы не чуствительны к регистру.