Как делать, чтобы 3 div были ровно в одну строку?

Question

Вот то, как должно быть:

Идёт один ряд и три столбца. Сколько не пробовал, средний (две картинки с текстом) сползает вниз.

.row1 {
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.photo {
  width: 250px;
}

.pic {
  width: 100px;
  height: 90px;
}

<div class="row1">
  <div class="u1">
    <img src="images/1.jpg" class="photo">
  </div>
  <div class="u2">
    <h4>Текст</h4>
    <img src="images/pic4.png" class="pic">
    <h4>Текст</h4>
    <img src="images/pic5.png" class="pic">
  </div>
  <div class="u3">
    <img src="images/2.jpg" class="photo">
  </div>
</div>

Answer 1

У некоторых элементов, в частности у заголовков <h4> браузер устанавливает отступы по-умолчанию. Если их обнулить, то на место всё встанет.

* {
  margin: 0;
}
.row1 {
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}

.photo {
  width: 250px;
}

.pic {
  width: 100px;
  height: 90px;
}

<div class="row1">
  <div class="u1">
    <img src="images/1.jpg" class="photo">
  </div>
  <div class="u2">
    <h4>Текст</h4>
    <img src="images/pic4.png" class="pic">
    <h4>Текст</h4>
    <img src="images/pic5.png" class="pic">
  </div>
  <div class="u3">
    <img src="images/2.jpg" class="photo">
  </div>
</div>

БЛОГ НА HUSL

Как делать, чтобы 3 div были ровно в одну строку?

Ответы (1 шт):