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

Question

我有两个没有任何宽度的 div，因为我正在处理流体布局。

• Div - 1 - 向左浮动 - 包含一组标签
• Div - 2 - 向右浮动 - 包含一些与标签

如果选项卡数量增加或调整浏览器大小时，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 中。