如何使文本垂直对齐浮动div中的底部？

Question

我一直试图解决这个问题几个小时，我无法让它发挥作用。

我有一个浮动的左边＆amp;正确的div。右侧div包含图像，左侧div包含文本。图像＆amp;文本交换左和右根据用户的偏好，这就是我使用浮动的原因。

如何将文本定位在包装器底部但位于图像旁边？

我在下面有一个视觉显示：

这是我的HTML代码：

<div class="wrapper">
    <div class"text">Text aligned at bottom</div>
    <div class="photo"><img id="photograph" src="" width="140px" height="140px" /></div>
</div>

Answer 1

添加了<div class="inner">，并将其设置为display:table-cell + vertical-align:bottom，请参阅以下演示和摘要。

修改还添加了calc()，使照片div的宽度与照片的宽度一样宽，文本div会自动占用所有剩余的宽度。

<强> JsFiddle Example

.wrapper {
    border: 1px solid blue;
    overflow: auto;
}
.wrapper .text {
    float: left;
    width: calc(100% - 140px);
}
.wrapper .photo {
    float: right;
}
.wrapper .inner {
    display: table-cell;
    height: 140px;
    vertical-align: bottom;
}
.wrapper .inner img {
    display: block;
}

<div class="wrapper">
    <div class="text">
        <div class="inner">Text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom.</div>
    </div>
    <div class="photo">
        <div class="inner"><img id="photograph" src="//dummyimage.com/140" /></div>
    </div>
</div>