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

Question

这是我的小提琴：

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

我的问题是：

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

我使用的是一个MediaWiki模板来生成示例中显示的内容。因为它是一个模板，所以每次调用它都会呈现一次。因此，对于示例中的每个字符，模板首先为name选项卡创建一个左浮动的DIV，在字符的bio内容下面创建一个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的行下面，而页面正文应该显示在所有选项卡下面。

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>

其中标签本身是浮动的，而清除是常见的浮点清除页面主体.