いわゆる 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 つの列が相互に関連しており、ある程度の抵抗があることです。なお、レイアウトの中央部分は必ず前面に配置する必要があり、左右の順序は制限されません。左余白の場合、負の値は折り返し幅と同じである必要があります。 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 コンテナの固定高さを使用するためのヒント
詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...
序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...
目次vue2.xプレコンセプト:ルーティングフックのカテゴリルーティングとコンポーネントの概念(フッ...
HTML の一般的なコメント: <!--XXXXXXXX--> (XXXXXXXX はコ...
React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。最近、t...
1. 背景LDAP を使用して、操作および保守に関連するユーザー名とパスワードを集中管理します。 1...
考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...
序文多くの Web アプリケーションは、リレーショナル データベース管理システム (RDBMS) に...
1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...
この記事では、例を使用して、MySQL 5.7 で生成された列の使用方法を説明します。ご参考までに、...
サーバーB(172.17.166.11)の電源がオンまたは再起動されると、サーバーA(172.17....
MySQL でサポートされている浮動小数点型は、 FLOAT 、 DOUBLE 、およびDECIMA...
目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...
目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...
この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...