CSS を使用して 3 列のアダプティブ レイアウト (両側は固定幅、中央はアダプティブ) を実現します。

CSS を使用して 3 列のアダプティブ レイアウト (両側は固定幅、中央はアダプティブ) を実現します。

いわゆる 3 列適応レイアウトとは、両側の幅が固定され、中央のブロックの幅が適応されることを意味します。この質問は、今年の NetEase のフロントエンド エンジニアの面接でも尋ねられました。 ここでは主に 2 つのカテゴリに分類します。1 つは従来の位置の実装に基づいており、もう 1 つは CSS3 の新機能である弾性ボックス モデル レイアウトの実装に基づいています。

1. 位置や余白などの従来の属性に基づいたレイアウト

ここでも、絶対配置、聖杯レイアウト、自己フローティングという 3 つの方法があります。

1). 絶対位置決め方式

絶対配置の原則は、左右の両側に絶対配置を使用することです。絶対配置はドキュメントの流れから外れるため、その後ろの中央が自然に左右の両側に流れ込みます。次に、margin 属性を使用して左右の要素の幅を残し、中央の要素が画面の幅に適応できるようにします。

コードは次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="UTF-8">
  <title>レイアウトボックス</title>
  <link rel="スタイルシート" type="text/css" href="../css/layout_box.css">
 </head>
 <本文>
  <h3>3列幅の適応レイアウトを実現する</h3>
  <div id = "left">私は左側にいます</div>
  <div id = "right">私は右側にいます</div>
  <div id = "center">私は真ん中にいます</div>
 </本文>
</html>

CSSコード:

html、本文{ 余白: 0px; 幅: 100%; }
h3{高さ: 100px;マージン: 20px 0 0;}
#left,#right{幅: 200px;高さ: 200px;背景色: #ffe6b8;位置: 絶対;上: 120px;}
#左{左:0px;}
#右{右: 0px;}
#center{余白:2px 210px;背景色: #eee;高さ: 200px;}

このレイアウト方法の利点は、3 つの div の順序を任意に変更できることです。デメリットは、絶対配置のため、ページ上に他のコンテンツがある場合、上部の値を慎重に扱う必要があることです。上記の例でタイトルを追加するのと同じように、CSS スタイルを初期化することをお勧めします。スタイルを初期化しないと、両側と中央の値が揃いません。 また、ブラウザウィンドウが縮小されるため、200px 未満になると圧縮が行われます。
結果は図の通りです。画面サイズに合わせて中央の列の幅が伸縮しているのが分かります。

2). セルフフローティング法を使用する

自己フローティング方式の原則は、左要素と右要素にそれぞれ float:left と float:right を使用することです。float は左要素と右要素をドキュメント フローの外側に配置し、中央の要素は通常のドキュメント フロー内に配置されます。margin は、配置する左余白と右余白を指定するために使用されます。

HTMLコード:

<h3>位置決めにはセルフフローティング方式を使用する</h3>
<div id = "left_self">私は左側にいます</div>
<div id = "right_self">私は右側にいます</div>
<div id = "center_self">私は真ん中にいます</div>

CSSコード:

#left_self、#right_self{ 幅: 200px; 高さ: 200px; 背景色: #ffe6b8 }
#left_self {float: left;}
#right_self{float: right;}
#center_self{余白: 0 210px;高さ: 200px;背景色: #a0b3d6}

このレイアウト方法の利点は、外部要因の影響を受けにくいことですが、欠点は 3 つの要素の順序です。Center は最後に配置する必要があります。これは絶対配置とは異なります。Center はドキュメント フローの位置を占めるため、最後に配置する必要があります。左要素と右要素の位置は互いに関係ありません。ブラウザウィンドウが小さい場合、右側の要素は次の行にノックダウンされます。

3). 聖杯レイアウト

Holy Grail レイアウトの原則は、ネガティブ マージン メソッドです。 Holy Grail レイアウトを使用するには、まず、center 要素の外側に div を含める必要があります。含める div は、BFC を形成するために float 属性を設定し、幅を設定する必要があります。この幅は、左ブロックの負のマージン値と調整する必要があります。具体的な原則については、こちらを参照してください。 Holy Grail レイアウトについては、ここで詳しく説明されています。

実装コード:

<h3>レイアウトに負の余白を使用する</h3>
  <div id = "ラップ">
   <div id = "center"></div>
  </div>
  <div id = "左余白"></div>
  <div id = "右マージン"></div>

CSSコード:

#wrap{ 幅: 100%; 高さ: 100px; 背景色: #fff; フロート: left;}
#wrap #center{ margin:0 210px; height: 100px; background-color: #ffe6b8; }
#left_margin、#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {左余白: -100%; 背景色: ライトピンク}
#右マージン{左マージン: -200px;}

この方法はウェブサイトのレイアウトでは非常に一般的で、インタビューでもよくテストされます。利点は、3 つの列が相互に関連しており、ある程度の抵抗があることです。なお、レイアウトの中央部分は必ず前面に配置する必要があり、左右の順序は制限されません。左余白の場合、負の値は折り返し幅と同じである必要があります。
3 列の Web ページ幅適応レイアウトを実現する 3 つの方法を次の図に示します。

2. CSS3の新機能

div を外側にラップして display:flex に設定し、中央に flex:1 を設定します。ただし、ボックス モデルはデフォルトでしっかりと接続されているため、margin を使用して外側の余白を制御できます。

コード:

<div id = "ボックス">
		 <div id = "left_box"></div>
		 <div id = "center_box"></div>
		 <div id = "right_box"></div>
		</div>

CSS スタイル:

#box{幅:100%;表示:flex;高さ:100px;余白:10px;}
#left_box、#right_box{幅: 200px;高さ: 100px;余白: 10px;背景色: ライトピンク}
#center_box{ flex:1; 高さ: 100px; 余白: 10px; 背景色: ライトグリーン}

注意: center は中央に配置する必要があります。

効果図は以下のとおりです。

CSS レイアウトには他にも多くの機能があります。次のステップはフローティングを学習し、次に位置と表示の属性を学習することです。

CSS を使って 3 列アダプティブ レイアウト (両側は固定幅、中央はアダプティブ) を実現する方法についての記事はこれで終わりです。CSS 3 列アダプティブ レイアウトに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  ページ内の検索エンジンの呼び出しはBaiduを例に挙げています

>>:  IE6 および IE7 で DIV コンテナの固定高さを使用するためのヒント

推薦する

Linux で MySQL データベースのスケジュールされたバックアップを実装する簡単な方法

詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...

jsのイベントループ機構の解析

序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...

Vue2.x と Vue3.x のルーティングフックの違いの詳細な説明

目次vue2.xプレコンセプト:ルーティングフックのカテゴリルーティングとコンポーネントの概念(フッ...

HTML におけるブロックコメントの使用に関する詳細な紹介

HTML の一般的なコメント: <!--XXXXXXXX--> (XXXXXXXX はコ...

React tsx はランダムな検証コードを生成します

React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。最近、t...

Docker を使用して OpenLDAP+phpLDAPadmin 統合ユーザー認証を構築する方法

1. 背景LDAP を使用して、操作および保守に関連するユーザー名とパスワードを集中管理します。 1...

JavaScript で一意の ID を生成するいくつかの方法

考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...

キャッシュサーバーを構築するためのMemcached方式

序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...

CSSで特殊なグラフィックを描く方法

1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...

MySQL 5.7 生成列の使用例の分析

この記事では、例を使用して、MySQL 5.7 で生成された列の使用方法を説明します。ご参考までに、...

2 つの Linux サーバー間の自動ファイル同期

サーバーB(172.17.166.11)の電源がオンまたは再起動されると、サーバーA(172.17....

MySQL における 10 進数型の使用法の簡単な紹介

MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...

Kylin 4.0.2 (Ubuntu) でブート パーティションを拡張するプロセスの紹介

目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...

Windows環境でのMySQL 8.0.13無料インストールバージョンの設定チュートリアル

目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...

jsを使用して簡単な抽選機能を実現する

この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...