时间戳

首页 > 解决方案 > 两个内联块 div 的垂直对齐

javascript - 两个内联块 div 的垂直对齐

问题描述

我在父 div 中有两个 div，两个子 div 都是 display: inline-block。我想让它左边的第一个 div 是垂直对齐：顶部，而第二个 div 是垂直对齐：底部，但我也想限制第二个 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

标签： javascripthtmlcss

解决方案

这是我使用的grid布局

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 55px 20px 55px;
  width: 65px;
}

#d2 {
  grid-row: 2;
  grid-column: 2;
}
<div class="container">
  <div id="d1">
    Here is some text
  </div>
  <div id="d2">
    Here is some other text
  </div>
</div>

推荐阅读