CSS - 旋转div -90deg - Flush

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位置。