bootstrap 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

引导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; 
}