使用CSS旋转文本的灵活布局

我试图布局一个需要旋转270度文本标签的控件。文字标签的宽度在理性范围内（比如说100px到500px）是可变的。使用CSS旋转文本的灵活布局

enter image description here

我试图得到这个工作在的jsfiddle

http://jsfiddle.net/ericjohannsen/LhjNq/3/

，但遇到了一些问题，我解决不了：

文本中非旋转区域（jsFiddle中的黄色和橙色）向右移动所旋转文本的长度。
旋转的文本延伸到远远低于关联的非旋转区域的底部，覆盖页面的其他部分。
为了保持屏幕上的标签，我必须应用转换转换的值基于旋转文本的长度硬编码。

使用CSS转换可以解决这些问题吗？

UPDATE

这使的jsfiddle问题2.更明显

http://jsfiddle.net/ericjohannsen/LhjNq/47/

来源

2012-08-06 Eric J.

这很有趣.. – Ben 2012-08-06 07:08:53

拆卸box_rotate浮动一点点jQuery的包装产生这个问题似乎有点帮助 – Ben 2012-08-06 07:09:32

我结束了解决在使用SVG被称为mbFlipText管理IE支持

http://jsfiddle.net/ericjohannsen/cgtu5/7/

来源

2012-08-11 00:21:07

这是你想要的？

http://jsfiddle.net/thundercracker/LhjNq/53/

我认为唯一的解决办法来纠正的div的高度的JavaScript。

为了摆脱额外的空间，我绝对定位了divs。

我不认为你的IE浏览器的轮换值是相当正确的，我把它们改为1.2，它似乎工作。但仍然在如何让IE获得div的正确高度，不会以同样的方式工作。

编辑：

IE实际上改变了元素的dimesions，所以你必须得到高度。另外，在IE中，旋转后的div必须从容器的顶部定位，而不是象其他浏览器底部

编辑：更新的链路

来源

2012-08-06 07:11:11

我得到一个404当我点击jsFiddle链接...？ – 2012-08-06 07:57:51

糟糕，不知道那里发生了什么 – 2012-08-06 17:12:21

所有变换施加受transform-origin。默认情况下，它的值为50% 50%，这意味着所有的转换将相对于块的中心进行。

主要的想法是将其更改为0 0（左上角） - 这将允许我们ommit demo on dabblet.com

尝试建立“基础上，旋转文本的长度值硬编码”它：

enter image description here

CSS：

transform: rotate(-270deg); 
transform-origin: 0 0;

来源

2012-08-06 07:23:57

该代码在IE 8中不起作用，因此对于所有实际目的而言，它可能不适用于任何浏览器，除非Eric J.针对的是非常精选的受众。此外，它不会运行旧版本的Firefox，这些版本仍然比较常见，尤其是在学校等地方。 – 2012-08-06 07:34:30

@GregRozmarynowycz对于老的ie，你可以用[** IETransformsTranslator **]（http://www.useragentman.com/IETransformsTranslator/）获得相同的结果。此代码[将在所有浏览器中工作]（http://caniuse.com/#feat=transforms2d）（ie9 +，ff3.5 +，chrome all，safari 3.1+，android 2.1+）我没有显示可读性的前缀。您可以在项目中使用**前缀**作为正确和实际的前缀。 – 2012-08-06 07:48:14

@GregRozmarynowycz如果Eric J.决定使用它，为什么你要和我讨论财产支持？ – 2012-08-06 07:53:19

使用CSS旋转文本的灵活布局

回答

相关问题