はじめに
レイアウトに CSS を使用する場合、通常、div レイアウトや float パディング マージン位置などの CSS プロパティを使用して、さまざまなレイアウト プランを取得できます。この記事では、3 列レイアウト スキームにおけるダブル ウイング レイアウトとホーリー グレイル レイアウトを紹介します。これらは同じ問題を解決します。つまり、左側と右側の部分の幅が固定され、変更に応じて中央の部分の幅が適応的に変化します。ブラウザの幅。前半の実装計画は似ていますが、違いは中盤の内容が双方にブロックされないようにする方法です。
準備段階
この部分は、二重翼レイアウトと聖杯レイアウトの実装計画の前半に属し、実装原理はフロートとネガティブ マージン テクノロジを使用することです。
-
中央の左、右の順に 3 つの div を書き込み、左と右の固定幅をそれぞれ 190px と 220px に設定します (これら 3 つの列を追加できます)初期の高さを一致させるために、min-width をコンテナとして追加することもできます。これにより、ウィンドウの幅が小さくなったときに中央部分が消える問題を回避できます。
-
この3つの列にfloatを追加します: left
-
width: 100%を中央に追加します
-
margin-left: -100% を左に追加し、中央の左にドラッグします
-
margin-left: -220 px を右に追加し、中央の左にドラッグします中央の右側
準備フェーズが完了すると、中央部分のコンテンツは両側によってブロックされます。次に、この問題に対する 2 つのレイアウトの解決策を紹介します。
解決策
二重翼レイアウト
中央にミドルラップのレイヤーを追加し、そのマージンを設定します: 0 220px 0 190px
以下完全なコード実装:
<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>双飞翼布局</title> <styletype="text/css"> *{ margin: 0; padding: 0; } .middle, .left, .right{ float: left; min-height: 200px; } .middle{ width: 100%; background-color: green; } .middle-wrap{ margin: 0 220px 0 190px; } .left{ width: 190px; margin-left: -100%; background-color: red; } .right{ width: 220px; margin-left: -220px; background-color: blue; } .container{ min-width: 600px; } .header, .footer{ text-align: center; background-color: yellow; } .footer{ clear: both; } </style></head> <body> <divclass="header"> <h2 id="header">header</h2> </div> <divclass="container"> <divclass="middle"> <divclass="middle-wrap"> <h2 id="middle">middle</h2> </div> </div> <divclass="left"> <h2 id="left">left</h2> </div> <divclass="right"> <h2 id="right">right</h2> </div> </div> <divclass="footer"> <h2 id="footer">footer</h2> </div></body> </html> Holy Grail レイアウト
-
これら 3 つの列のコンテナー コンテナーにパディングを追加します: 0 220px 0 190px , これにより、コンテナ全体の左側と右側に 190px と 220px のパディングが残ります。
-
相対配置位置を設定します: 相対および左右へのオフセットにより、左右のパディングに移動します。
以下は完全なコード実装です:
<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>圣杯布局</title> <styletype="text/css"> *{ margin: 0; padding: 0; } .middle, .left, .right{ float: left; min-height: 200px; } .left, .right{ position: relative; } .middle{ width: 100%; background-color: green; } .left{ width: 190px; margin-left: -100%; left: -190px; background-color: red; } .right{ width: 220px; margin-left: -220px; right: -220px; background-color: blue; } .container{ padding: 0 220px 0 190px; min-width: 600px; } .header, .footer{ text-align: center; background-color: yellow; } .footer{ clear: both; } </style></head> <body> <divclass="header"> <h2 id="header">header</h2> </div> <divclass="container"> <divclass="middle"> <h2 id="middle">middle</h2> </div> <divclass="left"> <h2 id="left">left</h2> </div> <divclass="right"> <h2 id="right">right</h2> </div> </div> <divclass="footer"> <h2 id="footer">footer</h2> </div></body> </html> 結論
-
2 つのレイアウトすべては、中間のコンテンツが最初にロードされることを実現できます。
-
聖杯レイアウトと比較して、二重飛行翼レイアウトでは div が 1 つ多く作成されますが、相対的な位置決めは必要ありません。ダブルフライングウイングレイアウトは互換性が良く、IE6にも対応可能です。ここの聖杯レイアウトは個人的にテストされており、IE8 と互換性があります。
参考記事
CSSレイアウト - 聖杯レイアウト＆双飛翼レイアウト
タオバオから始める双飛翼レイアウト入門UED
Holy Grail Layout
究極の CSS レイアウト ソリューション – Holy Grail Layout
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AMAnexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PMメニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...
オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PMWebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ホットトピック
7455
15137552