CSS Webページ制作例：同じ高さの3カラムのWebページレイアウト DIVs_html/css_WEB-ITnose

まず、同じ高さの 3 列レイアウトは、その名前が示すように、次の特徴に要約できます。

1. 3 列（バカでも知っています）

2. この 3 つの列の高さは等しいです

3. これら 3 つの列の高さは固定ではなく、内容が変わると変化します

ステップ 1:

div id="main" class="column">#main＜/div>。

＜div id="left" class="column">#left＜/div＞

＜div id="right" class= "column">#right＜/div＞

＜/div＞

＜div id="footer">#footer＜/div＞

主な構造は #container の div です #header と #footer については、完全に Web ページらしくするために、戻ってください。 Main には Web ページの中核となるメイン コンテンツが含まれるため、純粋な xhtml フロー ドキュメントでは無視できません。検索エンジンは上から下に解析するため、重要なコンテンツを配置する必要があります。これは検索エンジンの重みによって決まると思われますが、視覚的には後で中央に配置します。

考えてみましょう: 高さを指定せずに、これら 3 つの列をインテリジェントに一緒に移動するにはどうすればよいでしょうか?

実際、高さを書かずに知能を高めることはできないのは事実ですが、その高さをどのように書くかというと、答えはボックス モデルを使用してそのパディングを記述することです。これは倒錯的な方法ですが、うまく機能します。 、人と同じように 実際のサイズは 170 cm しかありませんが、髪の 20 cm を含めると、なんと、彼はすでに 190 cm です。最初に解決策を示しましょう。padding-bottom と margin-bottom を使用します。ステップ 2:

#コンテナ {

背景画像: url('bg.gif');

幅: 960px;

#left{float: left: width: 300px;background-color: #7bd; }＃right {float：width：160px; backgracus-color：＃f63;}

column{

bottom：32767px; ｝

このステップはこのトピックの核心と見なす必要があります。数値 32767 については、そのボックスを拡張するのに十分なスペースがあるほど「十分に大きい」と理解できます。それは問題ではありません。マージンボトムの負の値を使用してそれを隠すことができます。私は、このテクニックを明確に説明することはできません。 試してみればその秘密がわかります。以下の図が理解に役立つはずです:

このステップでは、これら 3 つの列のボックス モデルが 32767px であることがわかります。overflow: hidden; もちろん IE6.0 では、zoom:1; #container {

背景画像: url('bg.gif');

幅: 960px;

オーバーフロー: 非表示

これで #main の視覚効果が左の列では、中央に配置する方法を見つける必要があります

アイデア: 最初に #main を中央に配置し、#main{margin-left:300} を実行できます。この時点では、#left が圧縮されています# left{margin-left:-800px;} で 800px の位置に設定することはできますが、IE6 が本当に言葉を失っているのは残念なので、もう一度考えなければなりません。

CSS でレイアウトを行う場合、いくつかのアイデアがあります。1 つは float で、もう 1 つは位置決めです。詳しくない場合は、この属性を検索してください。そうでない場合 top と left を指定した場合、視覚効果は変わりません。

したがって、 #main を視覚効果の画期的なものにするためには、top または left を指定する必要があります。ここでは、 left を指定するだけで済みます。 #main {

float: left;

background-color: # e5e5e5 ;

幅: 500px;

;

#left {

背景色: #7bd;

}

実は真ん中にもう一つ重要な概念があって、#main、#left、position:relativeの後にレイヤーという概念があるので、#main{left:300px}のとき、 # 左が独立してしまいます。したがって、左に到達するには left:-500px が必要で、500 は #main の幅です。

最後の考慮事項は下位互換性です、

コードを提供してください:

ここまで書きましたが、できるからといって、それをすべきだというわけではありません。以下は私が知りたいことです:

最初に考えたのは:

margin-bottom: -32767px; という大きな値では、リフロー段階では大量のリソースがあり、それを制御するために js を使用すると、そのような高みに到達するのが簡単になりますか?

このようなことを書くのは初めてで、概念と言語表現の両方でまだ非常に曖昧であると思います。皆さんが私を積極的に修正し、より多くの友人とコミュニケーションをとることを願っています。一方、自分自身を向上させることは、コミュニティの調和と共有を促進し、自分の微力を尽くすことです。