html - 如何使文本垂直对齐到 float div 中的底部？

Question

我已经尝试解决这个问题几个小时了，但我无法让它工作。

我有一个左右浮动的 div。右侧的 div 包含图像，左侧的 div 包含文本。图片和文本根据用户的喜好左右交换，这就是我使用 float 的原因。

如何将文本放置在包装底部但紧挨着图像？

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

这是我的 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>