侧面带有垂直标题的 CSS 内容

Question

我将可变高度的 CSS 框设置为在更大的 div 中向左浮动。现在我想添加一个标题，其中文本在框的左侧垂直显示(旋转 90 度)，如下面的链接所示(抱歉还不能发布图片)。

http://imageshack.us/photo/my-images/259/cssquestion.png

我已经尝试了所有方法，但到目前为止还没有成功。我假设我需要在“包装”div 中制作两个 div(“标题”和“内容”)，但我在标题 div 上使用的任何位置设置似乎都是完全错误的。

这在 CSS 中完全可行，还是我必须使用一些 JS 来动态生成对齐“标题”和“内容”的高度？

谢谢，尼古拉斯

Answer 1

http://jsfiddle.net/3r2Sk/1/

你需要的主要代码是

-webkit-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-moz-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

遇到各种定位问题，旋转元素可能很挑剔。大多数位置和宽度和高度都必须适应您的特定情况。最好从头开始，只复制转换代码。使用以上链接作为引用。