包装内的内容对齐

Question

我正在接触这个草图：

我如何将图像推向底部，然后我可以正常对齐内容。对于我来说一些未知的原因，内容反应像一行，而不是一列

<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/