对齐问题：- 第二个帖子未正确对齐

Question

我面临一个对齐问题，我有一个解决方案。 但我想知道这背后的原因。 如果您运行我提供的 html 标记，您可以看到第二篇文章与第一篇文章没有内联。

我希望第二个帖子与第一个帖子保持一致。我有使用 flex 的解决方案。但我需要理由而不是解决方案

HTML :-

<div class="_3yTtBPc-LMIvY20o00OVsF">
  <div class="_2wIS4xHyz03D-DXLdHPFxP">
    <div class="_2NwLO4_WeKC2-xigIODSyO" style="">sunt aut facere repellat provident occaecati excepturi optio reprehenderit</div>
    <div>Nik</div>
  </div>
  <div class="_2wIS4xHyz03D-DXLdHPFxP">
    <div class="_2NwLO4_WeKC2-xigIODSyO" style="
    /* min-height: 90px; */
">qui est esse</div>
    <div>Nik</div>
  </div>
  <div class="_2wIS4xHyz03D-DXLdHPFxP">
    <div class="_2NwLO4_WeKC2-xigIODSyO">ea molestias quasi exercitationem repellat qui ipsa sit aut</div>
    <div>Nik</div>
  </div>
  <div class="_2wIS4xHyz03D-DXLdHPFxP">
    <div class="_2NwLO4_WeKC2-xigIODSyO">eum et est occaecati</div>
    <div>Nik</div>
  </div>
</div>

CSS :-

._3yTtBPc-LMIvY20o00OVsF {
  margin: auto;
  height: 200px;
  text-align: center;
}

._2wIS4xHyz03D-DXLdHPFxP {
  width: 90px;
  height: 130px;
  display: inline-block;
  padding: 20px 30px;
  margin: 10px 30px;
  border: 2px solid grey;
  box-shadow: 2px 5px 0 lightgrey;
}

._2NwLO4_WeKC2-xigIODSyO {
  max-height: 90px;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

预期：- 第二个帖子应该与第一个帖子一致 实际：- 第二个帖子比第一个帖子低。

Answer 1

默认情况下，当您使用display:inline-block; 时，您使用的是vertical-align: baseline; 你可以在这个 url 看到类似的问题：

Why my inline-block divs are not aligned when only one of them has text?

您需要明确添加vertical-align: top，以便相对于它们的顶部对齐块，否则对齐将基于内部div的基线完成，如图所示。

Answer 2

您需要添加vertical-align: top;

._2wIS4xHyz03D-DXLdHPFxP {
  width: 90px;
  height: 130px;
  display: inline-block;
  padding: 20px 30px;
  margin: 10px 30px;
  border: 2px solid grey;
  box-shadow: 2px 5px 0 lightgrey;
  vertical-align: top;
}