Разлазятся по высоте карточки товара?

Здравствуйте. Не получается сделать так чтобы карточки товара были одинакового размера: https://jsfiddle.net/2b1Ldsyp/
Я так понимаю это из-за того что количество текста внутри разное. Как сделать так чтобы карточки были одинаковой высоты и промежутки между ними были одинаковые.
  • Вопрос задан
  • 4456 просмотров
Решения вопроса 1
@3dben Автор вопроса
Нашел решение с помощью display: inline-block.
Нужно было сделать так:

.wrapper li{
display: inline-block;
vertical-align: middle;
margin: 10px 5px;
}


После того как я добавил vertical-align: middle; у меня блоки в которых больше текста стали вести себя как нужно и всё выровнялось. Думаю если добавить EqualHeight.js-master то будет еще лучше, но это не является моей целью. Вот конечный результат https://jsfiddle.net/zuhkLtfd/ Всем спасибо =)
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
@mletov
"Разлазятся" - это 5!
А посути вопроса: cымитировать таблицу через display: table и display:table-cell
Но если адаптив, то, конечно, не вариант
Ответ написан
LenovoId
@LenovoId
я дома ..самое лучшее время - это дома
Xserber
@Xserber
Full-stack developer. React.js, AngularJS + NodeJS
Почитав ответы и комментарии.
Можно решить плагином EqualHeight.js-master, если уже подключен jquery к сайту.
Он автоматически увеличивает высоту блоком, чтобы были одинаковыми.
Ответ написан
@cryolite
Как уже советовали выше display:flex, а еще можно для .wrapper li добавить vertical-align:top - тогда хвост будет внизу карточки и картинки будут на одном уровне. Если flex не будет работать, то inline-block в любом случае останется.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы