css - CSS と MediaWiki - 絶対および相対 DIV を使用して DIV を正しく自動展開する

Question

これが私のフィドルです：

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

そして、ここに私の問題があります：

MediaWiki を使用してウィキを作成しています。インストールで多くの拡張機能やサードパーティのものを使用しないようにしています。

私が使用しているのは、私の例に示されているコンテンツを生成するための MediaWiki テンプレートです。これはテンプレートであるため、呼び出されるたびに 1 回レンダリングされます。そのため、この例の各キャラクターについて、テンプレートは最初に名前タブ用の左側にフローティング 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の行の下に表示され、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>

タブ自体がフローティングしている場所で、clearfix は一般的なフロート クリア ページ本体です。