可変サイドを備えた 3 列の Web デザイン

Question

中央の列の幅が一定で常に中央に配置される、3 列の Web デザインを作成する方法を考え出そうとしています。左右の列は可変です。これはテーブルでは簡単ですが、意味的には正しくありません。現在のすべてのブラウザでこれを適切に動作させることができませんでした。これに関するヒントはありますか？

Answer 1

使用 このテクニック, をクリックし、中央の列の固定幅を指定するだけです。

Answer 2

これをチェックしてください: http://www.glish.com/css/2.asp

そして幅を置き換えます。#maincenter の xx% を固定値で指定します。Firebug で変更すると機能するようですが、試してみる価値はありますか?

#maincenter {
    width: 200px;
    float:left;
    background:#fff;
    padding-bottom:10px;
    }

Answer 3

両方のサイドバー列の初期（固定）幅から始めて、ページが読み込まれたときにJavaScriptを使用してウィンドウの幅を取得し、サイドバーの新しい幅を計算する必要があると思います。

サイドバーの幅 = (ウィンドウの幅 - 中央の列の幅) / 2

ウィンドウのサイズが変更された場合は、JavaScript を再適用できます。

Answer 4

この記事は A List Apart にあります には、次のような 3 列レイアウトになる解決策があります。

• 固定幅のサイドバーを備えた流動的なセンターを持ち、

• 中央の列がソース内で最初に表示されるようにします。

• どの列も最も高くなるようにします。

• マークアップの追加 div が 1 つだけ必要であり、

• 最小限のパッチを備えた非常にシンプルな CSS が必要です。