内容对准内包装

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/