Html CSS选项卡通过文本转换（旋转）环绕DIV的右侧？

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

如果窗口是敞开的，则显示为：

如果窗口打开或缩小，则显示为：

我想使用Listamatic（）并以某种方式对其进行更新，以便通过文本转换实现这种新的包装效果。这可能吗

以下是CSS的一部分，可能会起作用：

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

更新：2011年12月13日：CSS-强制子DIV扩展页面宽度

---

Minitech：感谢您的洞察力和Javascript示例。为了解决我的账单问题，我想我可以尝试另一种方法

我正在制作一个可编辑的导航。用户可以根据需要在顶部添加多个选项卡。如果有许多选项卡会强制将选项卡集拆分/包装到下一行，我希望强制将其放在一行上，即使这意味着页面宽度将大幅增加

即使内容在包装器中，子DIV是否也可以扩展页面宽度？在我下面的JS Fiddle链接中，我有一个带有右侧导航的简单包装页面。我在顶部使用Listamatic选项卡（）。正如你所看到的，这些标签被分成了很多行，看起来不太好。我可以使用一些CSS强制DIV不换行到第二行或第三行吗？我希望DIV是基于选项卡的数量（以及选项卡文本中文本的长度）的液体。有什么想法吗

---

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

一种简单的方法可能是使用

offsetTop

检查包装元素。类似于这样的情况（如果您使用它，您必须调整定位）：

---

然后，您可以根据需要设置

nava

（例如）和

nava.side-tab

。

IE确实不喜欢CSS3，所以请小心。通常需要很多JavaScript才能解决这个问题。Minitech：感谢您提供的见解和JavaScript示例。为了解决我的账单问题，我想我可以尝试另一种方法。请参阅我的更新（更新：12/13/2011）。

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';
    }
}