html - 側面が可変の 3 カラム ウェブ デザイン

Question

中央の列の幅が一定で、常に中央に配置される 3 列の Web デザインを作成する方法を考え出そうとしています。左右の列は可変です。これはテーブルでは些細なことですが、意味的には正しくありません。

現在のすべてのブラウザでこれを適切に機能させることができませんでした。これに関するヒントはありますか？

Answer 1

この手法を使用して、中央の列に固定幅を指定するだけです。

Answer 2

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

そして #maincenter の width: 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 を必要とします。