Question

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

下面的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>

Answer 1

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

bottom: 600px将无处可去 - 这只是将元素600px放在用户屏幕的底部。相反，给外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; }的正确位置。

{{1}}

尝试将垂直文本设置为底部对齐

1 个答案: