內容對準內包裝

Question

我達到這個小品：

我怎麼可以把圖像向底部，那麼我可以noramally相符的內容。對於一些未知的原因對我來說，內容的反應像一排，不列

<div class="d-flex flex-wrap"> 
    <div class="premises"> 
     <div class="left-wrapper"> 
      <img class="img-responsive" src="http://i.imgur.com/riJ1LKY.jpg" /> 
     </div> 
     <div class="right-wrapper align-self-end"> 
      <div class="title"> 
       <p class="">Title text</p> 
      </div> 
      <div class="ordered-data d-inline-flex justify-content-between"> 
       <p class="">**.**.**</p> 
       <p class="">**:** - **:**</p> 
      </div> <div class="destination d-inline-flex justify-content-start"> 
       <p class="">Destination</p> 
      </div> 
      <div class="footer-options d-inline-flex justify-content-between"> 
       <p class="">Submit</p> 
       <p class="">Cancel</p> 
      </div> 
     </div> 
    </div> 
</div> 

Fiddle

Answer 1

首先，你.premises應該有flex-direction: row;（或刪除其違約行爲），以獲得更接近的結果在你的原始圖像。 然後，您應該設置一個min-height: 0;到您的左側和右側包裝來反擊flex的min-height: auto;行爲，並刪除height: 100%;，因爲該值未在父級中明確設置。我還建議將vertical-align: bottom;設置爲您的圖片標籤。

這裏是一個更新，工作小提琴：https://jsfiddle.net/ybxbx55m/