Question

我有3个div元素，它们的 display 属性设置为 inline-block; 在容器中，属性为
宽度：80％; || 保证金：自动； || text-align：center;
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属性。在top类中将其设置为boxContent，并且它应与其父级的顶部对齐。对于内联元素，此属性的默认值为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 Element扩大了其容器的实力

1 个答案: