CSS floats_Experience 交換を使用して 3 列のページ レイアウトを作成する

3 列レイアウトは現在最も一般的な Web ページ レイアウトで、メイン ページのコンテンツが中央の列に配置され、その横の 2 列にナビゲーション リンクとその他のコンテンツが配置されます。基本的なレイアウトでは通常、タイトルの下に 3 つの列が配置され、その 3 つの列がページ幅全体を占めます。最後にフッターがページの下部に配置され、フッターもページ幅全体を占めます。

ほとんどの Web デザイナーは、テーブルを使用したレイアウトの生成、固定幅レイアウト、または「リキッド」(ユーザーのブラウザーの幅に基づいて自動的に拡大縮小する) の作成に使用できる、従来の Web デザイン手法に精通しています。ウィンドウ) Web ページ。

現在、私たちはテーブルベースのレイアウト手法から離れつつあり、多くの Web デザイナーは、3 列のレイアウトを作成する方法として XHTML マークアップと CSS 書式設定の新しいパラダイムに注目しています。絶対配置を使用して CSS から固定幅のレイアウトを取得するのは難しくありませんが、リキッド レイアウトを取得するのは少し難しくなります。そこでこの記事ではCSSのfloatとclearプロパティを使って3カラムのリキッドレイアウトを取得する方法を紹介します。

基本的な方法
基本的なレイアウトには、タイトル、フッター、および 3 つの列の 5 つの div が含まれています。ヘッダーとフッターはページの幅全体を占めます。左列 div と右列 div はどちらも固定幅で、float 属性を使用してブラウザ ウィンドウの左側と右側に押し込みます。中央の列は実際にはページ幅全体を占め、中央の列のコンテンツは左と右の列の間に「流れます」。中段の div の幅は固定ではないため、ブラウザウィンドウの変化に応じて必要に応じて伸縮します。中央列 div の左側と右側のパディング プロパティにより、コンテンツがサイドバー (左列または右列) の下部まで伸びている場合でも、コンテンツが整然とした列に配置されます。

3 列レイアウトの例
この記事で紹介したテクニックを使用した 3 列レイアウトの例をご覧ください。この例では、レイアウトのさまざまな div を区別するために明るい色を使用しています。

次は XHTML コードです:

ヘッダー

左舷側のテキスト...

右舷側のテキスト...

中央列のテキスト.. .

フッター テキスト...

以下は CSS コードです:

body {
マージン: 0px;
パディング: 0px;
div#header {
クリア: 両方;
背景色:アクア;
パディング: 1px;
}
フロート: 左;
背景色: 赤; div#right {
フロート: 右;
幅: 150px;
背景色: 緑;
パディング: 0px 160px 5px 160px; > マージン: 0 ピクセル;
背景色: シルバー;
div#footer {
クリア:
}