两个内联块div的垂直对齐

debugcn 发表于 Dev

MaddawgX9

我在父div内有两个div，两个子div都显示：inline-block。我想这样做，所以左侧的第一个div是vertical-align：top，而第二个div是vertical-align：bottom，但是我也想限制第二个div，以便它的第一行文本与第一个div的文本的最后一行，向下延伸，增加了父div的高度，而不是向上。我该怎么做？

例如，如果我有这样的东西：

<html>

<body>
<div>
 <div id="d1" style="width: 50px;display:inline-block;vertical-align:top;">
Here is some text
 </div>
 <div id="d2" style="width: 50px;display:inline-block;vertical-align:bottom;">
Here is some other text
 </div>
</div>
</body>

</html>

我希望d2的第一行与d1的最后一行对齐。所以看起来像这样：

Here
is
some
text Here
     is
     some
     other
     text

陪同Afif

vertical-align: text-top; 在第二个div上可以近似

#d1 {
  width: 50px;
  display: inline-block;
  vertical-align: 0.1em; /* rectify the alignment*/
}

#d2 {
  width: 50px;
  display: inline-block;
  vertical-align: text-top;
}

<div style="border:1px solid red;">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

<div style="border:1px solid red;font-size:20px;">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

使用float的另一个技巧是需要额外的包装器：

#d1 {
  width: 50px;
  display: inline-block;
  vertical-align: 0.1em;
}

#d2 {
  width: 50px;
  display: inline-block;
}

#d2:before {
  content: "";
  display: inline-block;
}

#d2>span {
  float: left;
}

<div style="border:1px solid red;">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    <span>Here is some other text</span>
  </div>
</div>

<div style="border:1px solid red;font-size:20px">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    <span>Here is some other text</span>
  </div>
</div>

万一宽度是已知的并且固定的另一个想法：

.container {
  border: 1px solid red;
  line-height:1.2em;
}

#d1 {
  width: 50px;
}

#d2 {
  width: 50px;
  margin-top: -1.1em;
  transform: translate(50px); /* the width of the first div */
}

<div class="container">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

<div class="container" style="font-size:20px">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

另一个与CSS网格

.container {
  border: 1px solid red;
  line-height:1.2em;
  display:grid;
  grid-template-rows:auto 1.1em auto;
  justify-content:flex-start;
}
.container > * {
  width: 50px;
  grid-row-end:span 2;
}

#d2 {
  width: 50px;
  grid-column:2;
  grid-row-start:2;
}

<div class="container">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

<div class="container" style="font-size:20px">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

在上述所有解决方案中，您可能需要em根据所使用的字体来调整值。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。