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

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

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

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

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

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