将内部 div 放置在行中

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 仅包含第一个和第二个内部 div。

我该如何解决这个问题？ 这是我检查时的样子。第三个不包含在“合作伙伴”中。 div

Answer 1

这将解决您的问题。.partners{&nbsp; &nbsp; justify-content:space-around;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; width: 100%;}.partners div{&nbsp; &nbsp; width:30%;}

Answer 2

如果您忘记关闭 html 中的标签，通常会发生这种情况。 请检查其余代码，确保您没有忘记关闭任何标签。

Answer 3

ypu 可以设置子 div 的最大宽度，使用类似&nbsp;.partners div { width: 30% }&nbsp;并在它们之间添加一些空间，您也可以使用&nbsp;.partners { justify-content: space-between; }&nbsp;提示: 当你在上面放置另一个display: flex时，display inline-block被取消，尝试只使用flex