引导 4 将 div 按行和顶部边界对齐

Question

我想对齐和成像以及内联的div。我还希望图像和div 的顶部也对齐。这就是我到目前为止所拥有的

<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
    <div class="comment-header">
        <span>title</span>
    </div>
    <blockquote>comment</blockquote>
</div>

我

尝试了类 d-inline-block，它接近我正在寻找的内容，但我需要文本位于顶部。

你可以在这里看到：http：//www.bootply.com/zpj12TL4wI

Answer 1

Bootstrap 4 包含一个实用程序类：align-top 。不需要额外的 CSS...

<div>
    <img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
    <div class="comment d-inline-block align-top">
        <div class="comment-header">
            <span>title</span>
        </div>
        <blockquote>comment</blockquote>
    </div>
</div>

http://www.bootply.com/wtAOA1JPn1

Answer 2

只需要垂直对齐的更改就是您需要的：

.comment {
    vertical-align: top;
}