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

Question

我正在尝试使用css将垂直（旋转）版权声明置于图像右侧。我几乎可以使它工作，但它仍然相对于页面定位文本，这不是一个可行的选项（它必须相对于图片或包含div）。我更喜欢使用纯css解决方案，但如果不可能，我也欢迎使用JQuery解决方案。

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

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

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

期望的结果

Answer 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，一个＆＃34;容器＆＃34;的id。

Answer 2

我可以使用inline-block，vertical-align:top和否定margin-left

来完成此操作

这是the fiddle，它有效。我不是使用margin-left: -75px的粉丝，但是遗憾的是，使用transform:rotate属性会在左侧留下一些需要考虑的额外空格。

Answer 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

Answer 4

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

CodePen

我们假设<div>包裹您的图片和标题的类别为.picture：

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

Answer 5

试试这个

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