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

Question

这是我的 fiddle :

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

这是我的问题:

我正在使用 MediaWiki 创建 wiki。我尽量避免在我的安装中使用大量扩展和第三方内容。

我使用的是 MediaWiki 模板来生成示例中显示的内容。因为它是一个模板，所以每次调用它都会呈现一次。因此，对于示例中的每个 Angular 色，模板首先为名称选项卡创建一个向左浮动的 DIV，并在其下方为 Angular 色简介的内容创建一个 DIV。我可以使该部分使用绝对定位，但维基页面的其余内容会显示在绝对 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>

每个 tab 应该彼此相邻 float 。 bio 应显示在 tab 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>

标签本身 float 的地方，clearfix 是常见的 float 清除页面主体。