使用CSS将旋转后的文本与图像的右上角对齐

Question

奋力登顶–将文本与图像对齐，同时保持相同的高度。这是一个shopify页面，所以我似乎只能更改CSS。这是一个博客页面，我想有滚动图像(见附件(。

线框示例

此处编码。。。

<div>
<img src="https://cdn.shopify.com/s/files/1/0473/3907/7794/files/AK01-1597-WB_1024x1024.jpg?v=1624265796"
alt=""
width="696"
height="1045"/> 
<p style="float:left;
margin-left:-75px;
display:inline-block;
padding-top:0px;
transform:rotate(90deg);
transform-origin:100% 100%;
-ms-transform: rotate(90deg);
-ms-transform-origin:100% 100%;
-webkit-transform:rotate(90deg);
-webkit-transform-origin: 100% 100%;">
<span>Side table by Peninsula, books by Uro Publications, local magazine Lindsay Magazine, carafe by Maison Balzac, handcream by Aesop.</p>
</div>

Answer 1

开始吧。https://jsfiddle.net/k6qtxjse/

div {
position: relative;
max-width: 696px;
max-height: 1045px;
}
img {
width: 100%;
height: 100%;
}
p {
position: absolute;
top: 0;
left: 100%;
writing-mode: vertical-rl;
}