将内部 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{

    justify-content:space-around;

    display: flex;

    width: 100%;

}

.partners div{

    width:30%;

}

Answer 2

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

Answer 3

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