css-float - 将文本与图像的右下角对齐

Question

我正在使用以下代码将标题与图像的右下角对齐。代码运行良好。

我想知道是否可以在不指定图片容器（.picture 类）的最小宽度的情况下重写它。调整浏览器窗口大小时，如果没有宽度，标题会向下移动：

<div class="picture">
    <img src="image.jpg">
    <div class='captioning'>
        <div class='title'>text</div>
        <div class='caption'>text</div>
    </div>
</div>

.picture {
    position: relative;
    overflow: hidden;
    min-width: 1200px;
}
.picture img {
    float: left;
}
.picture .captioning {
    float: left;
    width: 150px;
    margin: 0 0 0 15px;
}
.picture .captioning .caption {
    position: absolute;
    bottom: 0;
}
.picture .captioning .title {
    position: absolute;
    bottom: 0;
}

有任何想法吗？

提前致谢

Answer 1

我找到了解决方案。我在图像和标题上都使用了display: inline-block ，在容器上使用了white-space: nowrap ：

.picture {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.picture img {
    display: inline-block;
}
.picture .captioning {
    display: inline-block;
    width: 150px;
    margin: 0 0 0 15px;
    white-space: normal;
}
.picture .captioning .caption {
    position: absolute;
    bottom: 0;
}
.picture .captioning .title {
    position: absolute;
    bottom: 0;
}