Я делаю блог на WordPress. Есть вывод постов, но за счет картинки, названия, превью все блоки в линии разной высоты и это бросается в глаза. Я не могу найти способа их выровнять. Перелопатил несколько способов на css.
Оказался не рабочим
.row { display: table; div { display: table-cell; } }
С использованием flex,но bs с ним не дружит, после его использования все блоки встали в ряд и не работает сеточная система.
.equal, .equal > div[class*='col-'] { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex:1 0 auto; }
Реализован на jq. Оказался рабочим но с одним НО. Картинки с блога подгружаются чуть с опозданием и высоту блока jq сначала берет без них, но потом картинки появляются и опускают за пределы блока название и превью поста (тк у блока маленькая высота).
var highestBox = 0; jQuery('.content__block').each(function(){ if(jQuery(this).height() > highestBox) { highestBox = jQuery(this).height(); //нахожу высоту самого высокого блока } }); jQuery('.content__block').height(highestBox); //ставлю высоту самого высокого блока всем блокам
На первой картинке jq сработал верно, но такое бывает 1 к 5.
На второй проявился баг.
Можно ли как то баг с jq исправить или же есть какой то способ на css?
P.S. у меня один блок с классом .row
, и внутри него все блоки с классами .col-*