左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリューションについて詳しく説明します。

a. フローティングレイアウトを使用する

HTML構造は次のようになります

<div class="box">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="center">中央</div>
</div>   
//ここで、左と右のフローティング要素を最初にレンダリングし、次に中央の要素をレンダリングする必要があることに注意してください。要素がフロートされた後、残りの兄弟ブロックレベル要素は親要素の幅を占めるようになります。<style>
   。箱{
        高さ:200px;
    }    
    。左{
        フロート:左;
        幅:300ピクセル;
    }
    。右{
        フロート:右;
        幅:300ピクセル;
    }
</スタイル>

b. 固定位置を使用する

HTML構造は次のようになります

<div class="box">
    <div class="left">左</div>
    <div class="right">右</div>
     <div class="center">中央</div>
</div> 
// フローティング レイアウトと同様に、最初に左と右の要素をレンダリングして、親要素の左端と右端に配置し、残りの中央の要素が親要素の残りの幅を占めるようにします。
<スタイル>
    。箱{
        位置: 相対的;
      }
      。左{
        位置: 絶対;
        幅: 100ピクセル;
        左: 0;
      }
      。右{
        幅:100ピクセル;
        位置: 絶対;
        右: 0;
      }
      。中心{
        マージン: 0 100px;
        背景: 赤;
      }
</スタイル>

c. テーブルレイアウト

親要素を display:table に設定し、子要素を display:table-cell に設定すると、インライン ブロックになります。

このレイアウトの利点は互換性が優れていることです。

<div class="box">
  <div class="left">
    左
  </div>
  <div class="center">
    中心
  </div>
  <div class="right">
    右
  </div>
</div>
<スタイル>
    。箱{
        表示: テーブル;
        幅: 100%;
      }
      。左{
        表示: テーブルセル;
        幅: 100ピクセル;
        左: 0;
      }
      。右{
        幅:100ピクセル;
        表示: テーブルセル;
      }
      。中心{
        幅: 100%;
        背景: 赤;
      }
</スタイル>

d. 柔軟なレイアウト

親要素 display:flex の子要素はすべて一列に配置されます。

子要素のflex:nの幅は親要素の幅になります/n

flex:1 の場合、幅は親要素の高さと同じになります。

エラスティック レイアウトの欠点は互換性がないことです。現在、IE ブラウザではエラスティック レイアウトを使用できません。

<div class="box">
  <div class="left">
    左
  </div>
  <div class="center">
    中心
  </div>
  <div class="right">
    右
  </div>
</div>
<スタイル>
    。箱{
        ディスプレイ: フレックス;
        幅: 100%;
      }
      。左{
      
        幅: 100ピクセル;
        左: 0;
      }
      。右{
        幅:100ピクセル;
      }
      。中心{
        フレックス:1;
      }
</スタイル>

e. グリッドレイアウト

親要素 display:grid;

グリッドテンプレート列:100px 自動 100px;

最初の子要素の幅は 100 ピクセル、2 番目はアダプティブ、3 番目は 100 ピクセルの幅です。

グリッドレイアウトの利点は、非常にシンプルで、親要素のスタイルによって直接決定されることです。欠点は、互換性が高くないことです。

<div class="box">
  <div class="left">
    左
  </div>
  <div class="center">
    中心
  </div>
  <div class="right">
    右
  </div>
</div>
<スタイル>
  。箱{
        表示: グリッド;
        グリッドテンプレート列: 100px 自動 100px;
        幅: 100%;
      }
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法

>>:  CentOS 8 に Docker をインストールする詳細なチュートリアル

推薦する

LinuxスレッドのPID(TID、LWP)を取得するいくつかの方法の詳細な説明

Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

React Nativeでaxiosを使用してネットワークリクエストを行う方法

フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を...

HTML ドキュメントに CSS を埋め込む一般的な 3 つの方法

HTMLでCSSを定義するには、埋め込み、リンク、インラインの3つの方法が一般的に使用されます。 1...

純粋な CSS を使用して 3D 回転効果を実装するサンプル コード

3D効果を実現するには、主にCSSのpreserve-3dプロパティとperspectiveプロパテ...

Docker を使ってゼロから SOLO 個人ブログを構築する方法

目次1. 環境整備2. Dockerをインストールする3. MySQLマスタースレーブデータベースを...

MySQL 学習: 初心者のための 3 つのパラダイム

目次1. パラダイム基盤1.1 パラダイムの概念2. 3つの主要なパラダイム2.1 3つの主要なパラ...

CentOS 7にDockerをインストールする

Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....

純粋なCSSでは、子要素が親要素の幅制限を突破できる。

文章のスタイルでは、このような状況がよく見られます コードは次のとおりです <div styl...

JavaScript es6 における var、let、const の違いの詳細な説明

まず、よくある質問は、ECMAScript と JavaScript の関係は何ですか? ECMAS...

IIS web.config でクロスドメイン アクセスを設定する方法

要件: ページに画像を表示する必要がありますが、さまざまな理由により、画像はサーバー 2 にあります...

知っておくべき 25 の Vue のヒント

目次1. プロパティを型リストに制限する2. デフォルトのコンテンツと拡張ポイント3. ネストされた...

React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...

MySQLの明示的な型変換の簡単な分析

CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...

Centos7.3 Nginx をインストールして展開し、https を設定する方法

設置環境1. gccのインストールnginxをインストールするには、まず公式サイトからダウンロードし...