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;
}

将文本对齐到图像的右下角

1 个答案: