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

时间:2012-11-20 20:38:55

标签: css mediawiki mediawiki-templates

这是我的小提琴:

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

这是我的问题:

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

我正在使用的是MediaWiki模板,用于生成我的示例中显示的内容。因为它是一个模板,所以每次调用它时都会渲染一次。因此,对于示例中的每个字符,模板首先为名称选项卡创建一个左浮动DIV,为该角色的bio内容创建一个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>

每个标签应该互相浮动。 生物应显示在标签 div的行下方, pagebody 应显示在所有内容之下。

1 个答案:

答案 0 :(得分:0)

我建议这样的事情:

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