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 コンテナの固定高さを使用するためのヒント