CSS标签环绕DIV的右侧进行文本转换（旋转）？

Question

我想在页面顶部有标签，如果这些标签没有足够的空间，那么标签会环绕该DIV并进行文本转换以旋转90度。我的页面是基于窗口大小灵活的CSS液体设计。我不想使用图像，因为标签文本将从数据库中填充。下面是我想要完成的屏幕截图。我也在使用PHP，如果需要，我可以构建一些IF / THEN语句。我宁愿不使用Javascript。

如果窗口打开，请显示为：

如果窗口打开狭窄，显示为：

我想使用Listamatic（http://css.maxdesign.com.au/listamatic/horizontal05.htm）并以某种方式更新它以允许通过文本转换实现这种新的包装效果。这可能吗？

以下是可能有效的CSS的一部分：

.sidetabs {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

更新：12/13/2011： CSS - 强制子DIV扩展页面宽度？

Minitech：感谢您的见解和Javascript示例。为了解决我的标签问题，我想我可能会尝试另一种方法。

我正在进行可编辑的导航。用户可以根据需要在顶部添加许多选项卡。如果有很多选项卡会强制将一组选项卡拆分/包装到下一行，我想强制它在1行，即使这意味着页面宽度会大大增加。

即使内容在包装器中，是否还有一种方法可以让子DIV扩展页面宽度？在我下面的JS Fiddle链接中，我有一个带右侧的简单包装页面。我使用Listamatic标签（http://css.maxdesign.com.au/listamatic/horizontal05.htm）作为顶部。正如您所看到的，选项卡分为多行选项卡，看起来不太好。我可以使用一些CSS来强制DIV不包裹到第二行或第三行吗？我希望DIV基于标签的数量（以及标签文本中文本的长度）为液体。有什么想法吗？

http://jsfiddle.net/zenfiddle/yUPCC/3/

Answer 1

嗯，据我所知，使用CSS以及使用PHP是完全不可能的，因为它是一种服务器端脚本语言。在这个实例中你需要使用JavaScript，当然也要确保你优雅地降级。

一种简单的方法可能是使用offsetTop检查包装元素。这样的事情（如果你使用它，你将不得不调整定位）：

var navigation = document.getElementsByTagName('nav')[0].getElementsByTagName('a'); // Or however you want to do this
var i, element;

for(i = 0; element = navigation[i]; i++) {
    if(element.offsetTop > 0) {
        // It's a wrapping element
        element.className = element.className ? element.className + ' side-tab' : 'side-tab';
    }
}

然后，您可以根据需要设置nav a（例如）和nav a.side-tab的样式。