Как сделать div одинаковыми по высоте?

Question

[Антон]

https://codepen.io/anon/pen/KZvjRw
Если текста на три строки, а где то на две строки, то размер ячеек разный по высоте.
Как сделать одинаковыми по высоте?

Comments

[Justique]

#kartochka{
  display:inline-block;
  border: 1px solid #c4c4c4;
  width:200px;   margin: 5px;
  text-align:center;
  min-height: 180px;
  float: left;
  
}

[Одиночка Айс]

Для #kartochka добавьте vertical-align:top; тогда элементы встанут сверху.

[Антон]

Одиночка Айс, спасибо. Написал бы ты не в комментах, выбрал бы как лучший ответ.

[Одиночка Айс]

anton99zel, ну ок))

Answer 1

[ilanagrk]

Используйте Flex-box. https://html5book.ru/css3-flexbox/

Answer 2

[Одиночка Айс]

Все зависит от конкретной задачи, если Вам нужно просто поднять элементы наверх, при этом оставив разную высоту у блоков, то можете добавить для блока #kartochka св-во и значение vertical-align:top;

Answer 3

[Дмитрий]

div id='kartochka' на class смените в html и ID селектор #kartochka на .kartochka . Одинаковые ID нельзя использовать на одной страничке. А поскольку речь зашла о карточке товаров, гимором будет присваивать именной ярлык каждой карточке (kartochka1, kartochka2 итд) .

<div id='kartochka'></br><img src='{$img_path}'width='150' height='90' >
<p class='Imya'>00000000 0000000000000 00000000000000
</p><p class='Text'>9999999999
</p>
</div>

<div id='kartochka'></br><img src='{$img_path}'width='150' height='90' >
<p class='Imya'>000000000000000000000000
</p><p class='Text'>9999999999 
</p>
</div>

<div id='kartochka'></br><img src='{$img_path}'width='150' height='90' >
<p class='Imya'>000000000000000000000000
</p><p class='Text'>9999999999 
</p>
</div>

<div id='kartochka'></br><img src='{$img_path}'width='150' height='90' >
<p class='Imya'>00000000 0000000000000 00000000000000
</p><p class='Text'>9999999999
</p>
</div>

Только потом можно будет в процентном соотношении оцентрировать содержимое блоков через padding классическим способом, без флексов и гридов.

Ну а вообще, вот
https://validator.w3.org/ валидатор HTML
jigsaw.w3.org/css-validator валидатор CSS