CSS で 2 つの固定列と 1 つの適応列を実装するいくつかの方法

この記事では、CSS で 2 つの固定列と 1 つのアダプティブ列を実装するいくつかの方法を紹介し、皆さんと共有します。詳細は次のとおりです。

1.フレックスレイアウト

フレキシブルボックスモデル (一般にフレックスボックスと呼ばれます) は、1 次元レイアウトモデルです。フレックスボックスの子要素間の強力なスペース配分と配置機能を提供します。フレックスボックスは、一度に 1 次元 (行または列) の要素のレイアウトしか処理できないため、1 次元レイアウトと呼ばれます。ここではフレックスレイアウトを使用して、2つの固定列と1つの適応列を実現します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル> 

    ＃主要{
         display: flex;/*フレキシブルコンテナとして設定*/
         }

    ＃左{ 
        width:200px;/*左の幅を固定*/
        高さ:400px; 
        背景:水色;
    }
    ＃中心{
         flex-grow:1; /*残りのスペースを埋める*/ 
         高さ:400px;  
         背景:緑;}
    ＃右{ 
        width:200px;/*右幅固定*/
        高さ:400px;  
        背景:青;
        }
    </スタイル>
</head>
<本文>
    <div id="メイン">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</本文>
</html>

2. フローティング方式を使用する

左側と右側の部分にそれぞれ float:left と float:right を使用します。float は左側と右側の要素をドキュメントフローの外側に作成し、中央の要素は通常のドキュメントフローに含まれます。マージンを使用して、中央のドキュメントフローに配置するための左余白と右余白を指定します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル> 
    *{マージン: 0;パディング: 0;}
    ＃主要{
         幅: 100%;高さ: 400px;
         }
    ＃左{ 
        width:200px;/*左の幅を固定*/
        高さ:400px;
        float: left; /*コンテナを左にフロートするように設定する*/
        背景:水色;
    }
    ＃中心{
         幅: 100%;
         高さ:400px;
         margin: 0 200px;/*コンテナの左余白と右余白を設定します*/ 
         背景:緑;}
    ＃右{ 
        width:200px;/*右幅固定*/
        高さ:400px;  
        float: right;/*コンテナを右にフロートするように設定する*/
        背景:青;
        }
    </スタイル>
</head>
<本文>
    <div id="メイン">
        <div id="left"></div>
        <div id="right"></div>
        <div id="center"></div>
    </div>
</本文>
</html>

3. floatとcalc関数を使用する

3つの部分に float:left を使用し、左側と右側の幅を固定し、calc 関数を使用して中央の幅を計算します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル> 
    *{マージン: 0;パディング: 0;}
    ＃主要{
         幅: 100%;高さ: 400px;
         }
    ＃左{ 
        width:200px;/*左の幅を固定*/
        高さ:400px;
        float: left; /*コンテナを左にフロートするように設定する*/
        背景:水色;
    }
    ＃中心{
         width: calc(100% - 400px);/*中央の幅を親コンテナの幅から400pxを引いた値に設定する*/
         高さ:400px;
         float: left;/*コンテナを左にフロートするように設定する*/ 
         背景:緑;}
    ＃右{ 
        width:200px;/*右幅固定*/
        高さ:400px;  
        float:left;/*コンテナを左にフロートするように設定する*/
        背景:青;
        }
    </スタイル>
</head>
<本文>
    <div id="メイン">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</本文>
</html>

4. 絶対位置を使用する

両端の左右部分を固定する場合は絶対配置を使用し、中央のドキュメントフローに配置する場合はマージンを使用して左右の余白を指定します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル> 
    *{マージン: 0;パディング: 0;}
    ＃主要{
         幅: 100%;
         高さ: 400px;
         position: relative;/*親コンテナは相対的な配置を使用します*/
         }
    ＃左{ 
        width:200px;/*左の幅を固定*/
        高さ:400px;
        position: absolute;/*左側に固定位置を使用します*/
        left: 0;/*コンテナの左端に配置*/
        上: 0;
        背景:水色;
    }
    ＃中心{
         幅:100%;
         高さ:400px;
         margin: 0 200px;/*中央のコンテナの左余白と右余白を設定します*/
         背景:緑;}
    ＃右{ 
        width:200px;/*右幅固定*/
        高さ:400px;
        position: absolute;/*右側の固定位置*/
        right: 0;/*コンテナの右端に配置*/
        上: 0;
        背景:青;
        }
    </スタイル>
</head>
<本文>
    <div id="メイン">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</本文>
</html>

効果図は以下のとおりです。

これで、CSS を使用して 2 つの固定列と 1 つのアダプティブ列を実装するいくつかの方法について説明したこの記事は終了です。CSS を使用して 2 つの固定列と 1 つのアダプティブ列を実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: フォーム OnSubmit と input type=image の使用の概要

>>: JavaScriptタイマーの詳細な説明