css - CSS 和 MediaWiki - 使用绝对和相对 DIV 正确地自动扩展 DIV

Question

这是我的小提琴：

http://jsfiddle.net/XKs8H/1/

这是我的问题：

我正在使用 MediaWiki 创建一个 wiki。我试图避免在我的安装中使用很多扩展和第三方的东西。

我使用的是一个 MediaWiki 模板来生成我的示例中显示的内容。因为它是一个模板，所以每次调用它都会渲染一次。因此，对于示例中的每个角色，模板首先为名称选项卡创建一个左浮动的 DIV，并在其下方创建一个 DIV，用于该角色的简历内容。我可以使该部分与绝对定位一起工作，但随后 wiki 页面内容的其余部分显示在绝对 div 下方。

例子：

<div id="tab1">Tab 1</div>
<div id="bio1">Tab 1's bio</div>
<div id="tab2">Tab 2</div>
<div id="bio2">Tab 2's bio</div>
<div id="pagebody">Rest of the page's content</div>

每个选项卡应彼此相邻浮动。bio应该显示在选项卡 div 行下方，而pagebody应该显示在所有内容下方。

Answer 1

我会推荐这样的东西：

<div class="tab">
    <div class="tab-name">Tab 1</div>
    <div class="bio">Tab 1's bio</div>
</div>
<div class="tab">
    <div class="tab-name">Tab 2</div>
    <div class="bio">Tab 2's bio</div>
</div>
<div class="clearfix">Rest of the page's content</div>

选项卡本身是浮动的，而 clearfix 是常见的浮动清除页面主体。