Question

这只是一个CSS问题，但可以使用jQuery或非常聪明的CSS技术保存。看看你的想法。我已经创建了一个JSFiddle，因此您可以进行实验。 http://jsfiddle.net/WMVMW/157/

请参阅下面的问题。

这只需要在Android和Safari浏览器上运行 - 所以不要担心IE！

当我开始这个项目时，我最初计划使用CSS3来旋转一些html文本 - 并没有完全理解转换属性的含义。

我正在做的事情是一个互动的平面图。我有很多绝对定位的DIVS代表摊位/看台。因为我的一些DIVS非常薄但很高，我的想法是在DIV -90度内旋转文本。

这就是每个DIV的布局方式 - 它们实际上不是DIV，而是带有DIV风格行为的A标签。

<a href="" title="" id="200" class="cell"><span>Harley Davidson</span></a>

A标记内部的范围具有display: table cell;行为，因此文本可以在框内垂直对齐。

A标签上的ID号仅用于定位样式，类.cell样式控制所有其他行为..

我的挑战是引入一个名为.rotate的新类，它可以旋转文本-90度。但是在外观上仍然具有相同的外观 - 并且文本流动而不是从包含A标签继承宽度和高度。请参阅下面如何添加旋转类...

<a href="" title="" id="200" class="cell rotate"><span>Harley Davidson</span></a>

在这里查看JSfiddle ...以及所有css样式和

http://jsfiddle.net/WMVMW/157/

任何帮助都会很棒。我希望这是可以理解的。

Answer 1

诀窍是旋转整个a而不仅仅是span。实例：http://jsfiddle.net/WMVMW/164/

a.rotate{
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);   
}

#R135, #R135-1 {
    left: -35px;
    top: 85px;
    width:157px;
    height: 42px;    
}

所以我颠倒了width和height（因为它将被旋转）然后重新定位它。

Answer 2

您可以在另一个内添加额外的<span>：http://jsfiddle.net/WMVMW/160/

CSS旋转文本 - 复杂

2 个答案: