Как бороться с разной высотой div?

Question

[girat]

<div class = "kak-block kak-block-1"><p>Заполните форму заявки</p></div>
<img class = "strelka">
<div class = "kak-block kak-block-2"><p>Мы свяжемся с Вами в течении часа</p></div>
<img class = "strelka">
<div class = "kak-block kak-block-3"><p>Вы получите товар или услугу</p></div>

.kak{
background: #f2f1f6;
width: 100%;
text-align: center;
}

.kak-block{
width: 253px;
height: 233px;
border: 2px solid #6f49af;
display: inline-block;
margin-right: 60px;
}

Answer 1

[Abdula Magomedov]

vertical-align: top;

Comments

[girat]

Спасибо!

[Abdula Magomedov]

girat: не за что. Вот на заметку статья, если интересно htmlbook.ru/samlayout/blochnaya-verstka/strochno-b...

[girat]

Abdula Magomedov: Ещё раз спасибо:)

Answer 2

[SagePtr]

Во флекс запихните, а на старье пусть расползаются)

Answer 3

[HamSter]

Она же задана height: 233px;.

Попробуйте так

.kak-block {
...
display: inline-block;
  vertical-align: top;
}

или так

.kak-block {
...
display: inline-block;
  vertical-align: middle;
}

Comments

[girat]

Сделал с vertical-align, как и посоветовал Abdula Magomedov

[HamSter]

girat: Как писала ответ, еще не было других вариантов)))

[girat]

HamSter: тоже спасибо за вариант:)

Answer 4

[Сергей]

Через float делать, либо html в строку напиши весь.
и картинку почему в див не обернул с инлайном?

Comments

[girat]

Float не вариант, блоки по центру страницы

[girat]

+ пока только учусь, мне сейчас важны в первую очередь строчная-блочная модель