试图让垂直文本底部对齐
我试图实现的布局如下图所示：
下面的 HTML 是许多没有奏效的尝试之一。该项目仅针对最新浏览器中的 HTML5，因此除了最新的 Chrome、Safari、Firefox 和（随风）IE9 测试版之外，不需要它在任何东西上工作。
<!DOCTYPE html>
<html>
<body>
<div style="border: solid 1px red; width:600px; height: 600px">
<span style="-webkit-transform:rotate(-
90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span>
<img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg"
style="position:absolute;bottom:600px" />
</div>
</body>
</html>
我想你可能想要这样的东西：http : //jsfiddle.net/aNscn/3/
bottom: 600px会让你无处可去 - 这只会将元素放在距离用户屏幕底部 600px 的地方。相反，给外部divaposition: relative并让两个元素与它的底部对齐，并使用适当的低值bottom。还要检查transform-origin属性以获得span旋转后的正确定位。
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(-90deg);
-moz-transform-origin: left top;
-o-transform: rotate(-90deg);
-o-transform-origin: left top;
transform: rotate(-90deg);
transform-origin: left top;
position: absolute;
bottom: 0;
left: 5px;
}
#img {
position:absolute;
bottom: 15px;
left: 30px;
}