一般的な DIV + CSS 3 列レイアウト_html/css_WEB-ITnose

一般的な 3 列のアプローチは、以下の図に示すように、いくつかの DIV フレーム (Top、Container、Left、Content、Right、Footer) を持ちます。これらは通常存在する DIV です。

====================
CSS ソースコード
==================== ==
body{
margin:0; padding:0px} (中央に配置したい場合、Firefox で正しく動作する場合は、margin: 0px auto; に変更する必要があります。)

#DivTop {
width:1000px;
} (またはパーセンテージを設定)

#DivContainer {} (幅を設定する必要はありません。設定がない場合はデフォルトで 100% になります)

#DivLeft {
width:200px; float:left;

#DivRight {
width:200px; float :right;}

#DivContent {
margin-left:200px;margin-right:200px;}

#DivFooter {
clear:both;}
==== ============ =====
HTML ソース コード
====================

華山剣の部屋

四角と丸が真ん中にあります

全方向にステップダウン
===== ===============
上記のHTMLの配置がポイントです。真ん中のContainerには左、中、右の3つのDIVのコンテンツが入っており、本文には左、中、右のソースコードが入っています。 HTMLでの並び順は左、右、コンテンツの順です。左の Div と右の Div に float:left(right) を設定しているため、IE と Firefox のブラウザは左と右の位置の後で、最後の中央のコンテンツが再びキューに入れられます。 left:200px;margin-right:200px; の場合、左右のブロック幅が空になります。

最後に、フッターが下部に正しく表示されるように、DivFooter の clear:both; 属性を設定して float 属性をクリアする必要があります。この属性を設定しないと、フッターが上に浮き上がってしまいます。また、Firefox が CSS シーン全体に設定する高さは、下部のフッターに影響するほか、パディングとマージンの判断も IE と Firefox で大きく異なるため、設定が異なります。この点には注意してください。より複雑なパターンを繰り返し設計すると、このような問題に遭遇することがありますが、これを知っておくと扱いやすくなります。これは単なる足し算、引き算、引き算の算術問題にすぎません。

また、Firefox は text-align: center; CSS 設定を受け入れないため、従来の

を使用するのが非常に簡単です。もちろん、これを解決する方法はたくさんあります。みんなの創造力を見てみましょう。