ホームページ ウェブフロントエンド CSSチュートリアル 両翼レイアウトと聖杯レイアウトの詳細なグラフィックとテキストの説明

両翼レイアウトと聖杯レイアウトの詳細なグラフィックとテキストの説明

Mar 21, 2018 pm 02:52 PM
グラフィックとテキスト レイアウト 詳しい説明

今回はダブル飛翼レイアウトと聖杯レイアウトを画像と文章で詳しく解説します ダブル飛翼レイアウトと聖杯レイアウトを使用する際の注意点について実際の事例を交えて紹介していきます。一緒に見てください。

Double-wing レイアウトと Holy Grail レイアウトはどちらも、両側に中央を固定したアダプティブ 3 列レイアウトを実現する方法です。最近、3 列レイアウトを実装する方法についてメモを整理していて、決定しました。これら 2 つの古典的なレイアウトを思い出すために記事を取り出してください。

1. 聖杯レイアウト

フローティング、負のマージン、相対位置、追加タグなし

レンダリング

DOM構造:

<p class="header">Header</p>
<p class="bd">
    <p class="main">Main</p>
    <p class="left">Left</p>
    <p class="right">Right
    </p>
</p>
<p class="footer">Footer</p>
ログイン後にコピー

スタイル:

<style>
        body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .bd{
            padding-left:150px;
            padding-right:190px;
        }
        .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-150px;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:-190px;
            position:relative;
            right:-190px;
        }
    </style>
ログイン後にコピー

中段左 プロセス右側の部分のスタイルの変更

1. 中央の部分はブラウザの幅の変更に応じて変更する必要があるため、ここでは左、中央、右を左にフロートさせます。真ん中の部分が100%で、左右のレイヤーは全然位置が上がってます

      .left{
            background: #E79F6D;
            width:150px;
            float:left;
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
        }
ログイン後にコピー

2. 左側のレイヤーでmargin150をマイナスしたら、左側が上がっていることが分かりました。ウィンドウの外側に位置がないので、上に移動することしかできません

.left{ 
   background: #E79F6D; 
   width:150px; 
   float:left; 
   margin-left:-150px; 
}
ログイン後にコピー

3. 次に 2 番目のボタンを押します。この方法に従って、ウィンドウの幅を移動するだけで、左端の位置。負のマージンを使用して左右の列を配置します

.left{ 
  background: #E79F6D; 
  width:150px; 
  float:left; 
  margin-left:-100%; 
}
.right{ 
  background: #77BBDD; 
  width:190px; 
  float:left; 
  margin-left:-190px; 
}
ログイン後にコピー

4. ただし、問題は、外側のレイヤーにパディングを追加する必要があることです。
.bd{ 
  padding-left:150px; 
  padding-right:190px;
}
ログイン後にコピー

5. ただし、追加後、左右の列もインデントされたため、相対配置方法を使用して列自体を相対的に移動させて最終結果を取得しました

.left{ 
  background: #E79F6D; 
  width:150px; 
  float:left; 
  margin-left:-100%; 
  position: relative; 
  left:-150px; 
} 
.right{ 
  background: #77BBDD; 
  width:190px; 
  float:left; 
  margin-left:-190px; 
  position:relative; 
  right:-190px; 
}
ログイン後にコピー

2 . 二重飛行翼レイアウト

追加のタグを追加しなくても、聖杯レイアウトはすでに完璧です。将来のレイアウトには制限があり、幅の制御も変更する必要があります。もっと簡潔で便利な他の方法はありますか?

淘宝網 UED の議論では、p を 1 つ追加すると、相対レイアウトの必要性がなくなり、フローティング マージンとネガティブ マージンのみが使用されます。これは、私たちがダブル フライング ウィング レイアウトと呼ぶものです。

DOM 構造: p がメインの内部層に追加されました

<p class="header">Header</p>
<p class="bd"> 
  <p class="main"> 
    <p class="inner"> Main </p>*
  </p> 
  <p class="left">Left</p> 
  <p class="right">Right </p>
</p>
<p class="footer">Footer</p>
ログイン後にコピー

スタイル:

左右の列の相対的な位置が削除されました

ラッピング層のパディングが削除され、真ん中の列の新しいpが置き換えられました

        body{
          padding:0;
          margin:0
        }
        .header,.footer{
          width:100%;  
          background:#666;
          height:30px;clear:both;
        }
        .bd{
            /*padding-left:150px;*/
            /*padding-right:190px;*/
        }
        .left{
            background: #E79F6D;
            width:150px;
            float:left;
            margin-left:-100%;
            /*position: relative;*/
            /*left:-150px;*/
        }
        .main{
            background: #D6D6D6;
            width:100%;
            float:left;
        }
        .right{
            background: #77BBDD;
            width:190px;
            float:left;
            margin-left:-190px;
            /*position:relative;*/
            /*right:-190px;*/
        }
        .inner{
            margin-left:150px;
            margin-right:190px;
ログイン後にコピー

3. ダブルフライングウイングレイアウトとホーリーグレイルレイアウトの違い

ホーリーグレイルレイアウトとダブルフライングウイングレイアウトの問題の解決策は最初のものと同じです。半分、つまり:

中央の列の幅は100%に設定されます
  • 3つの列はすべて浮動小数点です
  • 左右の列に負のマージンを追加し、中央の列と並べて配置しますp を使用して 3 列のレイアウトを形成します。
  • その違いは、中央の列 p コンテンツがブロックされない問題を解決するためのさまざまなアイデアにあります。
Holy Grail Layout

3つの列の外側のラッピングレイヤーの左右のpadding-leftとpadding-rightを設定します
  • 相対レイアウト位置を使用します: 左と右のPSに相対し、右に一致しますと left 属性をそれぞれ自分自身を基準にして移動します 中央の p をブロックしないように
  • 両翼レイアウト

コンテンツを配置するために中央 p の中にサブ p を作成します
  • このサブ p 、margin-left と margin-right を使用して、左右の列 p を確保します
  • の位置には 1 つ多くの p があり、使用する CSS 属性は 4 つ少なくなります (pp のadding-leftとpadding-rightの2つの属性)聖杯レイアウトの中央に加え、左右の 2 つの PS は相対レイアウト位置を使用します。相対と対応する Right と Left には合計 4 つの属性があり、ダブルウィング レイアウトの sub-p には合計 6 つの属性があります。 margin-left と margin-right の合計 2 つの属性 (6-2=4) を使用します。
そして、二重飛行翼レイアウトにはもう 1 つの利点があります。これにより、メインが BFC 要素に変わり、画面幅が縮小されたときにメインが圧迫されなくなり、聖杯レイアウトが圧迫されます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:


CSS3トランジションスムーズトランジションメニューバーの実装

CSSで0.5ピクセルの線を作成する方法


以上が両翼レイアウトと聖杯レイアウトの詳細なグラフィックとテキストの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

C++のmode関数の詳しい解説 C++のmode関数の詳しい解説 Nov 18, 2023 pm 03:08 PM

C++ のモード関数の詳細な説明 統計において、モードとは、一連のデータ内で最も頻繁に現れる値を指します。 C++ 言語では、モード関数を記述することによって、任意のデータセット内のモードを見つけることができます。モード関数はさまざまな方法で実装できます。一般的に使用される 2 つの方法を以下で詳しく紹介します。 1 つ目の方法は、ハッシュ テーブルを使用して各数値の出現回数をカウントすることです。まず、各数値をキー、出現回数を値とするハッシュ テーブルを定義する必要があります。次に、特定のデータセットに対して次を実行します。

Win11での管理者権限の取得について詳しく解説 Win11での管理者権限の取得について詳しく解説 Mar 08, 2024 pm 03:06 PM

Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています

C++の剰余関数の詳しい解説 C++の剰余関数の詳しい解説 Nov 18, 2023 pm 02:41 PM

C++ の剰余関数の詳しい説明 C++ では、剰余演算子 (%) を使用して、2 つの数値を除算した余りを計算します。これは、オペランドが任意の整数型 (char、short、int、long など) または浮動小数点数型 (float、double など) になる二項演算子です。剰余演算子は、被除数と同じ符号の結果を返します。たとえば、整数の剰余演算の場合、次のコードを使用して実装できます。

Oracle SQLの除算演算の詳細説明 Oracle SQLの除算演算の詳細説明 Mar 10, 2024 am 09:51 AM

OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算

WordPress Web ページの位置ずれを解決するためのガイド WordPress Web ページの位置ずれを解決するためのガイド Mar 05, 2024 pm 01:12 PM

WordPress Web ページの位置のずれを解決するためのガイド WordPress Web サイトの開発では、Web ページ要素の位置がずれていることがあります。これは、さまざまなデバイスの画面サイズ、ブラウザの互換性、または不適切な CSS スタイル設定が原因である可能性があります。このずれを解決するには、問題を注意深く分析し、考えられる原因を見つけて、段階的にデバッグおよび修復する必要があります。この記事では、WordPress Web ページの位置ずれに関する一般的な問題とその解決策をいくつか紹介し、開発に役立つ具体的なコード例を提供します。

PHPモジュロ演算子の役割と使い方を詳しく解説 PHPモジュロ演算子の役割と使い方を詳しく解説 Mar 19, 2024 pm 04:33 PM

PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割 数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。

Linuxシステムコールsystem()関数の詳細説明 Linuxシステムコールsystem()関数の詳細説明 Feb 22, 2024 pm 08:21 PM

Linux システム コール system() 関数の詳細説明 システム コールは、Linux オペレーティング システムの非常に重要な部分であり、システム カーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システム コールの基本概念 システム コールは、ユーザー プログラムがオペレーティング システム カーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。

C言語学習ルートを詳細に分析 C言語学習ルートを詳細に分析 Feb 18, 2024 am 10:38 AM

ソフトウェア開発の分野で広く使用されているプログラミング言語として、C 言語は多くの初心者プログラマーにとって最初の選択肢です。 C言語を学ぶと、プログラミングの基礎知識を定着させるだけでなく、問題解決能力や思考力も向上します。この記事では、初心者が学習プロセスをより適切に計画できるようにするための C 言語学習ロードマップを詳しく紹介します。 1. 基本的な文法を学ぶ C 言語の学習を始める前に、まず C 言語の基本的な文法規則を理解する必要があります。これには、変数とデータ型、演算子、制御ステートメント (if ステートメント、

See all articles