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