对齐右侧的重叠文本

Question

我试图在中心和列中显示不同大小的多个图像，除此之外，在第一个图像上有一个重叠的标题，在右边对齐。

左边的标题是可以的，如下所示：

http://jsfiddle.net/c48em4ng/

p {
  position: absolute;
  top: 10%;
  left: auto;
}

然而，我无法正确对齐图像右侧的文本，即文本的右侧与图像的右侧匹配。

如果我将left: auto替换为right: 0px，则标题完全在右侧。 http://jsfiddle.net/c48em4ng/1/

如果我将position: absolute替换为text-align: right，则水平对齐方式正常，但标题最终位于图像上方： http://jsfiddle.net/c48em4ng/2/

我能做的最好的事情是手动调整为right: 26.5%之类的东西，但当然它可以在其他地方使用。 http://jsfiddle.net/c48em4ng/3/

Answer 1

您应该对您应用position: relative的文本和图像使用包装元素。然后，absolute文本的body定位将与此包装相关（而不是csv.DictReader，就像你的小提琴一样）并带来所需的结果，请参阅http://jsfiddle.net/m4vno3oa/1/