在响应式布局中，将文本与图像上的另一个文本即右对齐

Question

我有一个包含 image 的页面，其中包含文本。图像外的文本需要与图像内的文本右对齐。我试过用适用于某些尺寸的百分比来处理这个问题，但不是全部。

试图弄清楚是否有一种简单的方法可以适用于所有人以及响应式布局。

例子：

Answer 1

这对你来说怎么样？ https://jsfiddle.net/n451c4ym/2/ "bottom" css 属性需要调整 - 但是通过该设置，文本的右侧仍然与图像上的固定文本内联...

基本上你给父母一个相对的位置：

.imageContainer{
    position: relative;
    width: 100%;
}

并使文本成为该容器的子项（与图像一起）。然后通过使您的 html 文本宽度为 100%，它应该以与图像相同的比例缩放（进而固定图像文本）：

.imageContainer img{
    width: 100%;
}


.text{
    color: #fff;
    display: block;
    position: absolute;
    bottom: 50%;
    padding-right: 7vw;
    right: 0;
    text-align: right;
    width: 100%;
}