我在一个父 div 中有两个 div，两个子 div 都显示: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
最佳答案
这是我使用的 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>关于javascript - 两个内联 block div 的垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63273214/