p 元素向上扩展其容器

Question

我有 3 个 div 元素，它们的 display 属性设置为 inline-block； 在具有属性
的容器中 宽度：80%； || 边距：自动； || 文本对齐：居中；
3个div里面有一个img和一个p元素
当 p 元素中的文本进入第二行时，它会向上扩展并且会破坏图像与其他 p 元素之间的对齐方式。

这是代码及其结果：https://jsfiddle.net/yrvd51f6/11/

我也把它作为代码块留在这里。

.container {
  width: 80%;
  margin: auto;
  text-align: center;
  border: 1px solid black;
}

.boxContent {
  display: inline-block;
  width: 30%;
}

.boxContent img {
  width: 20%;
}

h1 {
  text-align: center;
}

<div class="container">

  <h1>Who We Are?</h1>

  <!-- FIRST BOX ------------------------------------->
  <div class="boxContent">
    <img src="https://www.freeiconspng.com/uploads/orange-circle-png-3.png">
    <p>Description Text</p>
  </div>
  <!-- SECOND BOX ------------------------------------->
  <div class="boxContent">
    <img src="https://www.freeiconspng.com/uploads/orange-circle-png-3.png">
    <p>If this text gets in to second line, align will be broken. Why? I don't understand this CSS sometimes. If this text gets in to second line and more, it heighthens upwards. But I didn't set a height value, shouldn't it heighthen downwards and images
      stay aligned? . Why this is happening? I don't understand this CSS sometimes.</p>
  </div>

  <!-- THIRD BOX ------------------------------------->
  <div class="boxContent">
    <img src="https://www.freeiconspng.com/uploads/orange-circle-png-3.png">
    <p>Description Text</p>
  </div>

</div>

Answer 1

您要查找的是 vertical-align 属性。在 boxContent class 中将其设置为 top，并且它应该与其父元素的顶部对齐。对于内联元素，此属性的默认值为 baseline，它根据父元素的基线对齐，这就是默认情况下它位于底部的原因。

查看 MDN 了解更多详情：https://developer.mozilla.org/pt-BR/docs/Web/CSS/vertical-align#Values_(for_inline_elements)

.container {
  width: 80%;
  margin: auto;
  text-align: center;
  border: 1px solid black;
}

.boxContent {
  display: inline-block;
  vertical-align: top;
  width: 30%;
}

.boxContent img {
  width: 20%;
}

h1 {
  text-align: center;
}

<div class="container">

  <h1>Who We Are?</h1>

  <!-- FIRST BOX ------------------------------------->
  <div class="boxContent">
    <img src="https://www.freeiconspng.com/uploads/orange-circle-png-3.png">
    <p>Description Text</p>
  </div>

  <!-- SECOND BOX ------------------------------------->
  <div class="boxContent">
    <img src="https://www.freeiconspng.com/uploads/orange-circle-png-3.png">
    <p>If this text gets into the second line, align will be broken. Why? I don't understand this CSS sometimes. If this text gets into the second line and more, it heightens upwards. But I didn't set a height value, shouldn't it heighten downwards and images
      stay aligned? . Why this is happening? I don't understand this CSS sometimes.</p>
  </div>

  <!-- THIRD BOX ------------------------------------->
  <div class="boxContent">
    <img src="https://www.freeiconspng.com/uploads/orange-circle-png-3.png">
    <p>Description Text</p>
  </div>

</div>

p 元素向上扩展其容器

p Element Expands its Container Against Upwards

html

css

display