如何将旋转的文本放置在图像的右侧答案

【问题标题】：How to position rotated text to the right of image如何将旋转的文本放置在图像的右侧
【发布时间】：2014-06-05 22:31:04
【问题描述】：

示例：http://jsfiddle.net/s5zYj/4/

编辑：我应该指定我正在寻找一个通用解决方案，它适用于任何合理长度的名称（不仅仅是米老鼠）。

HTML

<div>
    Some text <br /><br /><br /><br />
</div>
<div>
    <img class="caption" src="http://lorempixel.com/g/400/300/cats/"/>
        <span class="image-copyright"><small>&copy; Mickey Mouse</small></span>
</div>

CSS

.image-copyright {
    position: absolute;
    float: right;
    transform: rotate(-90deg);
    transform-origin:100% 100%;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -ms-transform-origin:100% 100%; /* IE 9 */
    -webkit-transform:rotate(-90deg);
    -webkit-transform-origin: 100% 100%;
    z-index: 100;
    color: gray;
    right: 58px;
}

想要的结果

【问题讨论】：

标签： jquery css transform

【解决方案1】：

我用过这个css

.image-copyright {
position: absolute;

transform: rotate(-90deg);
transform-origin:100% 100%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:100% 100%; /* IE 9 */
-webkit-transform:rotate(-90deg);
-webkit-transform-origin: 100% 100%;
z-index: 100;
color: gray;
right: -20px; /*edited*/
top:-18px;
}

#container {
position:relative;
background:yellow;
display:inline-block;
}

我给了 img 的父 div，一个“容器”的 id。

【讨论】：

这似乎有效（尽管我必须将top:-18px; 添加到image-copyright）：jsfiddle.net/s5zYj/11。除非测试打破它，否则我认为这是正确的答案。
我认为 transform-origin 现在可以安全使用了：caniuse.com/#search=CSS3%202D%20Transforms

【解决方案2】：

我能够使用inline-block、vertical-align:top 和否定的margin-left 完成此操作

这是the fiddle，它正在工作。我不喜欢使用margin-left: -75px，但不幸的是，使用transform:rotate 属性会在左侧留下一些需要考虑的额外空白。

【讨论】：

谢谢扎克；正如我在对 Ryan Brewer 的评论中提到的那样，这对于给定的示例很有用，但如果可能的话，我想要更通用的东西。

【解决方案3】：

无需绝对定位，只需使用float:left 和display:inline-block，然后为图像设置负边距。

HTML：

<div><p>Some text</p>
    <img class="caption" src="http://lorempixel.com/g/400/300/cats/" />
    <div class="image-copyright"><small>&copy; Mickey Mouse</small></div>
</div>

CSS：

.image-copyright {
    display:inline-block;
    float: left;
    transform: rotate(-90deg);
    transform-origin:100% 100%;
    -ms-transform: rotate(-90deg);
    /* IE 9 */
    -ms-transform-origin:100% 100%;
    /* IE 9 */
    -webkit-transform:rotate(-90deg);
    -webkit-transform-origin: 100% 100%;
    color: gray;
    margin-left:-75px;
}
.caption {
    display: inline-block;
    float: left;
}

DEMO

【讨论】：

这适用于给定的标题，但我正在寻找一种适用于任何文本的通用解决方案。如果我在你的演示中使用“Mickey Mouse the Magnificent”，对齐就会再次消失。
如果您使用较长的文本行，只需增加图像上的负数margin-left 属性：jsfiddle.net/brewersomething/s5zYj/10
承认上述解决方案不是动态的，因此如果您有多个带有多个标题的图像，则每次都必须设置margin-left。如果我有时间，我会尝试制定一个不使用任何 Javascript 的更动态的解决方案。使用 Javascript 会很容易！ :)

【解决方案4】：

不知道为什么人们如此反绝对定位。如果您了解它的工作原理，它通常是最可靠的解决方案：

CodePen

让我们假设包装图像和标题的<div> 具有.picture 类：

.picture {
    display: inline-block;
    position: relative;
    padding-right: 25px;
}
.picture .image-copyright {
    position: absolute;
    top: 0;
    right: 0;
}

【讨论】：

【解决方案5】：

试试这个

transform-origin: 80% 400%;
<!--for all browsers-->

【讨论】：