左右の幅を固定し、中央の幅を適応させた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 をインストールする詳細なチュートリアル