css - CSS - 旋转 div -90 度 - 刷新

Question

我有一个容器，里面有文本，旁边有另一个容器（右浮动）。此 div 应重新旋转 -90deg 并在其中包含标题文本。

如何旋转这个 div 使其与另一个 div 齐平？

就像图片中一样。问题是我不能使用 transform-origin: right top 因为“起点”不应该是右上而是可变的，因为文本可以更小或更长。

Answer 1

但是，您可能必须使用transform-origin它，这取决于您的 HTML 的结构。如果您没有任何代码，这可能最接近您正在寻找的内容：

http://jsfiddle.net/2GA6H/

使用绝对定位将标题文本放置在具有匹配边距的右上角（与容器上所需的填充匹配），然后使用transform-origin: top right.

像这样的东西：

#caption {
    position: absolute;
    top: 0px;
    right: 32px;    
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: top right;
}

容器所在的relative位置。