html - 内联 block div 与什么对齐？

Question

我认为每个 inline-block 元素根据其各自的 vertical-align 值对齐到一行。

但似乎我们可以让元素根据其中文本的位置对齐。

举个例子

.icon-card {
  border: 1px solid black;
  display: inline-block;
  width: 18%;
}

.section1 .icon-card {
  vertical-align: top;
}

.section2 .icon-card {
  vertical-align: baseline;
}

.section3 .icon-card {
  vertical-align: baseline;
}

.section1,
.section2,
.section3 {
  width: 260px;
}

<div class='section1'>
  <div class='icon-card' style='height:50px'>
  </div>
  <div class='icon-card' style='height:80px'>
  </div>
  <div class='icon-card' style='height:40px'>
  </div>
  <div class='icon-card' style='height:200px'>
  </div>
</div>
<div class='section2'>
  <div class='icon-card' style='height:50px'>
  </div>
  <div class='icon-card' style='height:80px'>
  </div>
  <div class='icon-card' style='height:40px'>
  </div>
  <div class='icon-card' style='height:200px'>
  </div>
</div>
<div class='section3'>
  <div class='icon-card' style='height:50px'>
    Not
  </div>
  <div class='icon-card' style='height:80px'>
    Quite what
  </div>
  <div class='icon-card' style='height:40px'>
    I
  </div>
  <div class='icon-card' style='height:200px'>
    want
  </div>
</div>

(或参见 https://jsfiddle.net/tqgqrd9a/4/)

在这个例子中，我们有 section2 和 section3，“应该”对齐相同。他们为什么不呢？到底是怎么回事？

理想情况下，我更喜欢一个能够解释正在发生的事情并告诉我“我应该从哪里学到它”的答案。

Answer 1

我不能很好地解释这个，但我理解它，我会尽力而为

这里令人困惑的部分是 vertical-align: baseline 它指的是文本的基线。在第 2 部分中没有文本，因此基线只是父级上的最低点(最高容器决定了这一点)。

第 3 部分，因为您有文本，所以框在文本的基线处对齐。文本的基线是每个框中所有文本的最低点(通常是文本量最多的那个)。第 3 节中的每个框都从文本开始的位置开始，并且由于框上有高度，所以文本溢出框并且基线成为每个框中所有文本的最低点，在我们的例子中，框 1 和 2 都有构成基线的行数相同。如果您向其中一个添加更多文本，您会看到对齐方式也会发生变化，因为基线会因更多文本而发生变化。

如果你把 overflow: hidden 放在 .icon-card 上，那么第 2 部分和第 3 部分将是相同的，因为文本不会溢出并且基线是父级(因为隐藏的溢出导致文本不能降低)。

不确定这是否是一个很好的解释，但我希望你能理解。

一些文档在这里

https://developer.mozilla.org/en/docs/Web/CSS/vertical-align

https://css-tricks.com/what-is-vertical-align/