我将可变高度的 CSS 框设置为在更大的 div 内向左浮动。现在我想添加一个标题，其中文本在框的左侧垂直显示（旋转 90 度），如下面的链接所示（抱歉还不能发布图片）。
http://imageshack.us/photo/my-images/259/cssquestion.png
我已经尝试了一切，但到目前为止没有运气。我假设我需要在“包装器”div 中创建两个 div（“标题”和“内容”），但是我在标题 div 上使用的任何位置设置似乎完全错误。
这在 CSS 中是否可能，还是我必须使用一些 JS 来动态对齐“标题”和“内容”的高度？
谢谢，尼古拉斯
穿上transform:rotate(180deg);你的titlediv，将它浮动到左边，它应该可以完成工作。
您需要的主要代码是
-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);
遇到各种定位问题，旋转元素可能很挑剔。大多数位置、宽度和高度都必须适应您的特定情况。最好从头开始，只复制转换代码。使用上面的链接作为参考。
您遇到的问题是与垂直定位元素有关的常见问题，只是问题有点复杂，因为您使用transform: rotate的是 270 度。当您旋转一个元素时，浏览器首先会像未旋转一样绘制它，然后显示旋转后的版本，因此如果您不小心，有时会出现重叠的属性。
一种解决方案是将元素的内容和背景的绘制分开。
我通常以这种方式处理垂直对齐：将外部元素设置为display: table，将内部元素设置为display: table-cell，这样您就可以设置vertical-align: middle为内部元素中的文本。
这是一个例子：http: //jsfiddle.net/MsBKQ/9/
似乎在所有浏览器上都能正确显示：http ://caniuse.com/#search=display%3A%20table