CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

<セクションクラス='レイアウトフロート'>
         <スタイル>
             .layout.float .left-right-center{
                 高さ: 100px;
             }
             .layout.float .left{
                 フロート: 左;
                 幅: 300ピクセル;
                 背景色: 赤;
             }

             .layout.float .right{
                 フロート: 右;
                 幅: 300ピクセル;
                 背景色: 青;
             }

             .layout.float.center{
                 背景色: 黄色;
             }
         </スタイル>
         <記事クラス="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">私は真ん中の適応要素、つまり浮遊している要素です</div>
         </記事>
     </セクション>

<セクションクラス="レイアウト絶対">
         <スタイル>
             .layout.absolute .left-center-right div{
                 位置: 絶対;
                 高さ: 100px;
             }

             .layout.absolute.left{
                 左: 0;
                 幅: 300ピクセル;
                 背景色: 赤;
             }

             .layout.absolute.center{
                 左: 300ピクセル;
                 右: 300px;
                 背景色: 黄色;
             }

             .layout.absolute.right{
                 右: 0;
                 幅: 300ピクセル;
                 背景色: 青;
             }
         </スタイル>
         <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                私は真ん中の適応要素です - 絶対的な位置付け</div>
            <div class="right"></div>
         </記事>
     </セクション>

<セクションクラス="レイアウトフレックス">
         <スタイル>
             .layout.flex .left-center-right{
                 ディスプレイ: フレックス;
                 高さ: 100px;
             }

             .layout.flex .left{
                 幅: 300ピクセル;
                 背景色: 赤;
             }

             .layout.flex .center{
                 フレックス: 1;
                 背景色: 黄色;
             }

             .layout.flex .right{
                 幅: 300ピクセル;
                 背景色: 青;
             }
         </スタイル>
         <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                私は真ん中の適応要素です - フレックスレイアウト</div>
            <div class="right"></div>
         </記事>
     </セクション>

   <section class="レイアウトテーブル">
        <スタイル>
            .layout.table .left-center-right{
                表示: テーブル;
                高さ: 100px;
                幅: 100%;
            }

            .layout.table .left{
                表示: テーブルセル;
                幅: 300ピクセル;
                背景色: 赤;
            }

            .layout.table .center{
                表示: テーブルセル;
                背景色: 黄色;
            }

            .layout.table .right{
                表示: テーブルセル;
                幅: 300ピクセル;
                背景色: 青;
            }
        </スタイル>
        <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                私は真ん中の適応要素です - テーブル
            </div>
            <div class="right"></div>
        </記事>
    </セクション>

<セクションクラス="レイアウトグリッド">
        <スタイル>
            .layout.grid .left-center-right{
                表示: グリッド;
                幅: 100%;
                grid-template-rows: 100px;/*各グリッドの高さは100pxです*/
                grid-template-columns: 300px auto 300px;/*左と右のグリッドはどちらも 300px で、中央のグリッドは適応型です*/
            }
            
            .レイアウト.グリッド.左{
                背景色: 赤;
            }

            .レイアウト.グリッド.センター{
                背景色: 黄色;
            }

            .layout.grid .right{
                背景色: 青;
            }
        </スタイル>
        <記事クラス="左-中央-右">
            <div class="left"></div>
            <div class="center">
                私は真ん中の適応要素です - グリッドレイアウト</div>
            <div class="right"></div>
        </記事>
    </セクション>