Размещение внутренних элементов в строке

Question

У меня есть контейнер div, который содержит 3 различных элемента div. Я хочу поместить внутренние div в ряд.
Вот html код: Вот как это должно выглядеть.

.partners {
  display: inline-block;
  display: flex;
  flex-direction: row;
  width: 100%
}

<div class="partners">
  <div>
    <img src="media/handshake.png" alt="handshake" class="handshake">
    <h1>10+</h1>
    <p>partners investing their time and effort to support our mission</p>
  </div>

  <div>
    <img src="media/social-care.png" alt="social care" class="social-care">
    <h1>150+</h1>
    <p>members working hard to be able to support our mission</p>
  </div>

  <div>
    <img src="media/respect.png" alt="respect" class="respect">
    <h1>243+</h1>
    <p>donors supporting our community and making impossible possible</p>
  </div>

</div>

Но последний внутренний div выходит за пределы экрана, и когда я проверяю страницу, он показывает, что div "partners" содержит только первый и второй внутренние div.

Как я могу решить это? Вот как это выглядит, когда я проверяю. Третий не входит в "partners" div

Answer 1

Это решит вашу проблему.

.partners{
    justify-content:space-around;
    display: flex;
    width: 100%;
}

.partners div{
    width:30%;
}

Answer 2

Это часто случается, если вы забыли закрыть тег в html. Пожалуйста, проверьте оставшуюся часть кода, чтобы убедиться, что вы не забыли закрыть какой-либо тег. Вы также можете использовать онлайн-чекер html, как этот:

https://www.aliciaramirez.com/closing-tags-checker/

Answer 3

Вы пытались использовать что-то вроде metroui или даже bootstrap?

IE: С metroUI вы можете использовать систему сетки, чтобы делать именно то, что вы хотите, см .: https://metroui.org.ua/grid.html#_media_columns

Вот ссылка, объясняющая, как включить metroui в ваш проект:

https://metroui.org.ua/intro.html#_quick_start

Answer 4

ypu может установить максимальную ширину для дочерних элементов div, используя, например, .partners div { width: 30% }, и чтобы добавить некоторое пространство между ними, вы также можете использовать .partners { justify-content: space-between; } tip: display inline-block отменяется при установке другого display: flex выше, попробуйте использовать только flex