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; 您可以在以下网址看到类似的问题：

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

您需要显式添加vertical-align: top，以使块相对于其顶部对齐，否则，将根据内部div的基线进行对齐，如图所示。{{3 }}

Answer 2

您需要添加INSERT into seats values(Traindetails.TrainId, "2019-11-10", stationdetails.StationId, Traindetails.1AC, traindetails.2AC, traiandetails.3AC, traindetails.General) where NOT EXISTS(Select * from traindetails inner join seats on traindetails.TrainId=seats.TrainId where seats.Date="2019-11-10" and Seats.StationId NOT IN (Select StationId from stationdetails where TrainId="1") );

vertical-align: top;

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

2 个答案: