html - 将元素排列在相同高度上，标题中的行数不同

Question

自从我开始做更多的前端工作以来，我时不时地遇到这个问题。我使用引导程序作为我的前端框架，并想做一个简单的 2 列布局。每列都有一个标题和一个图像。

现在我的问题是，如果一列的标题分布在多行上，则图像的起始高度不会沿两列对齐。例子：

标记只是基本的引导布局：

<div class='row'>
<div class='col-6'>
<h4>title</h4>
<img src='...'>
</div
<div class='col-6'>
<h4>some other long title over two lines</h4>
<img src='...'>
</div
</div>

我知道如何使用 js 将所有标题的标题高度设置为相同，但这似乎不是一个很好的解决问题的方法。有没有一个简单的css技巧来实现这一点？

标签： htmlcssbootstrap-4