Question

我有可变高度的CSS框设置为在更大的div内浮动。现在我想添加一个标题，文本在框的左侧垂直显示（旋转90度），如下面的链接所示（抱歉无法发布图像）。

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

到目前为止，我已经尝试了所有东西但没有运气。我假设我需要在'包装'div中创建两个div（'title'和'content'），但是我在标题div上使用的任何位置设置都显示完全错误。

这在CSS中是否可行？或者我是否必须使用一些JS来动态地调整'title'和'content'的高度？

谢谢，尼古拉斯

Answer 1

将transform:rotate(180deg);放在title div上，将其浮动到左边，然后就可以了。

http://www.w3schools.com/cssref/css3_pr_transform.asp

Answer 2

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

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

Answer 3

您遇到的问题是与垂直定位元素相关的常见问题，只有问题稍微复杂一点，因为您在270度时使用transform: rotate。当您旋转元素时，浏览器首先绘制它，就好像它没有旋转一样，然后显示旋转的版本，因此如果您不小心，最终会出现重叠属性。

一种解决方案是拆分元素的内容和背景的绘图。

我通常以这种方式处理垂直对齐：将外部元素设置为display: table，将内部元素设置为display: table-cell，这样就可以将vertical-align: middle设置为内部文本元件。

这是一个例子： http://jsfiddle.net/MsBKQ/9/

似乎正确显示在所有浏览器上：http://caniuse.com/#search=display%3A%20table

带有垂直标题的CSS内容

3 个答案: