4

私が見たさまざまなCSSレイアウトモデルで対処されていない質問があるので、ここに投稿しようと思いました。

基本的な流体/固定2列レイアウトを使用するサイトで作業しています。サイトのコンテンツは左側のdivにあり、サイドバーは右側にあります。サイドバーの幅は200ピクセル程度に固定されており、コンテンツは親の残りの幅を埋めるために拡張されます。

コードは次のようになります。

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
   <div style="margin-right: 200px;">Content goes here.</div>
   <div style="float: right; width: 200px;">Menus goes here.</div>
   <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

これはかなり標準的なアプローチであり、ほとんどの場合正常に機能しますが、問題は、サイトのデザインでサイドバーが特定の場合にのみ表示される必要があることです。すべてのHTMLはPHPを介して生成され、「get-content（）」関数は「get-sidebar（）」関数が呼び出されるかどうかを認識しません。

サイドバーが呼び出されたら、サイドバー用の十分なスペースを残しながら、コンテンツを拡張して親divを埋めたいと思います。サイドバーがない場合は、コンテンツが親の幅全体に広がるように拡張する必要があります。

PHP / JavaScriptに依存せずに、CSSでこれを行う方法はありますか（おそらくコンテンツマージンに「自動」を使用します）？

4

3 に答える 3

2

あなたはそれをこのようにすることを検討するかもしれません：

<div style="width: 90%; margin: 10px auto 10px auto;"> <!-- site container -->
    <div style="background-color:#CCC;height:100%;">
        <div style="background-color:#444;float: right; width: 200px;height:100%;">Menus goes here.</div>
        Content goes here.
    </div>
    <div style="clear: both;"></div> <!-- float-clearer div -->
</div>

このようにすることで、メニューはメインdiv内に配置され、右マージンがなくなります。したがって、メニューが消えると、テキストが拡張されてスペースが埋められます。

「高さ：100％;」メニューボックスとコンテンツボックスが同じ高さに伸びることを確認します。必要に応じて、これをピクセルまたはemの量、または100未満のパーセンテージに設定することもできます。

于 2009-10-02T17:47:07.787 に答える
0

サイドバーを浮かせる代わりに、これを試してください。

#sidebar {
  display: inline-block;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}
于 2009-09-27T17:26:02.310 に答える
0

PHPを使用して本体にクラスを追加することは可能でしょうか？コンテキストに応じて、「1列」または「2列」のようなもの。次に、サイドバーがある場合はコンテンツdivにマージンを与えることができますが、ない場合はできません。

于 2009-09-28T15:27:57.980 に答える