两个具有未知宽度和动态缩放的Div

Question

我有两个没有任何宽度的div，因为我正在进行流畅的布局。

• Div - 1 - 左侧浮动 - 包含一组标签
• Div - 2 - Floated right - 包含一些与之相关的偏好 标签

如果选项卡的数量增加或者在调整浏览器大小时，Div 2应将其自身缩放为单独的一行（100％宽度），将（border-bottom：1px solid＃999）本身与选项卡分开。

Wireframe - Illustrated for your understandingc

这可以通过仅使用HTML / CSS而不使用JS来实现吗？任何代码提示都很有用。它必须在IE6,7,8和FF 2和3中工作。

提前致谢，

瓦森特

---

此问题的后续内容可用here。

Answer 1

我认为你可以用html / css做到这一点，但你必须测试它是否适用于所有浏览器。

您需要确保选项卡和首选项都保持在一行，例如，如果它们位于列表中，您需要告诉列表不要换行：

ul {
    white-space: nowrap;
}
li {
    float: left;    // or right...
    // or
    display: inline;
}

当然首选项需要在标签之前的html中。

Answer 2

不，我认为只有HTML / CSS才能实现这一点。无论你做什么，你的链接都将保持在上面或下面 - 如果它在同一条线上，标签将适应并在必要时跳下。

您必须使用一些Javascript来计算整个容器的宽度，选项卡的总宽度以及右侧两个链接的宽度 - 然后计算tabWidth > (something) { put links above }。

老实说，我宁愿一直把这两个链接放在首位： - ）