这是我的 fiddle :
这是我的问题:
我正在使用 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 应显示在所有内容下方。
最佳答案
我推荐这样的东西:
<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 清除页面主体。
关于CSS 和 MediaWiki - 使用绝对和相对 DIV 正确自动扩展 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13481706/