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>

每个选项卡应彼此相邻浮动。简历应显示在选项卡div 行下方，页面正文应显示在所有内容下方。

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 是常见的浮动清除页面正文。