试图让垂直文本底部对齐答案

【问题标题】：Trying to get vertical text to bottom align试图让垂直文本底部对齐
【发布时间】：2010-10-01 17:16:11
【问题描述】：

我想要实现的布局如下图所示：

下面的 HTML 是许多失败的尝试之一。这个项目只针对最新浏览器中的 HTML5，因此除了最新的 Chrome、Safari、Firefox 和（以及后续风）IE9 beta 之外，它不需要在任何东西上工作。

<!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>

【问题讨论】：

标签： html webkit css

【解决方案1】：

我想你可能想要这样的东西：http://jsfiddle.net/aNscn/3/

bottom: 600px 会让你无处可去 - 只是将元素放置在距离用户屏幕底部 600 像素的位置。相反，给外部div 一个position: 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;
}

【讨论】：

哇，好用。非常令人印象深刻。不过只有一件事——图像上的 left:30px 假定文本的宽度。是不是不能让图片自动浮到文字的右边？
@Nestor 不是真的，至少不使用这种方法，但如果有帮助，您可以尝试使用 em 单位。
是的，已经快 11 年了，但是您的解决方案非常棒。这对于多列也非常有效。谢谢。