CSSの3カラムレイアウトを詳しく解説

今回はCSS 3カラムレイアウトについて詳しく解説します。 CSS 3カラムレイアウトの注意点とは何か。実際の事例を見てみましょう。

この記事では CSS の古典的な 3 列レイアウトのスキームを紹介し、みんなで共有したり、自分用にメモしたりすることができます。詳細は次のとおりです。

3 列レイアウトは、名前が示すように、両側が固定されています。そして真ん中で適応します。 3 列レイアウトは開発において非常に一般的です

1. float レイアウト

最も単純な 3 列レイアウトは、レイアウトに float を使用することです。まず、左右の列を描画します:

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    </style>
      
      <p>
        </p><p></p>
        <p></p>
        <p></p>
      

この時点で、左右の列の分布を取得できます:

次に、中央の列の処理方法を見てみましょう。 float 要素の場合、ドキュメント フローから切り離され、他のボックスはこの要素を無視することがわかっています。 (ただし、他のボックス内のテキストはこの要素用のスペースを確保し、それを囲みます。) したがって、現時点では、コンテナー コンテナーに通常の p を追加するだけで済みます。これにより、左右が無視され、コンテナー全体が埋められます。さらに、マージンが左右にあり、スペースが流出します:

   <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        margin-left: 120px;
        margin-right: 120px;
      }
    
      .container {
        border: 1px solid black;
      }
    
      <p class="container">
      <p class="left">
      <p class="right">
      <p class="main">
      </style>

長所: シンプル

短所: 中央部分が最後に読み込まれるため、コンテンツが多い場合はエクスペリエンスに影響します

2 . BFC ルール

BFC (ブロック フォーマット) ルールでは、BFC が浮動要素と重複しないことが規定されています。したがって、メイン要素を BFC 要素として設定すると、次のようになります。

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    
      <p class="container">
        <p class="left">
        <p class="right">
        <p class="main">
      </style>

3. 聖杯レイアウト

聖杯レイアウトの核心は、左、中央、右の列がすべて float によってフローティングされ、その後調整されることです。マイナスマージンで。

最初のステップは、基本的なレイアウトを確認することです

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }
        .right {
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
    
        <p>
            </p><p></p>
            <p></p>
            <p></p>
        
    

この時点で見られる効果は次のとおりです: 左右の列が 2 行目に押し込まれています。これは main の width が 100% であるためです。次に、左と右の列のマージンを調整して、左、中央、右を 1 行に配置します。

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }
        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background-color: yellow;
        }

2 番目のステップは、左のマージン左を -100% に設定することです。左の列が最初の行の先頭に移動します。次に、右の margin-left を負の幅の値 -100px に設定すると、右の列も左と中央の列と同じ行に移動されます:

しかし、まだ完了していません。メインにテキストを追加してみます:

    
        <p>
            </p><p>fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
            <p></p>
            <p></p>
        
    

テキストが抑制されていることがわかります。次にこの問題を解決する必要があります。

3 番目のステップは、コンテナにパディングを与えることです。パディングは左と右の列の幅と正確に同じである必要があります:

        .container {
            padding-left: 100px;
            padding-right: 100px;
        }

この時点で表示される結果は、左、中央、右の列がすべて揃っていることです。全体的には縮小しましたが、テキストはまだ抑制されています。

4 番目のステップは、左右の列に相対レイアウトを追加し、左右の値を設定してそれらを外側に移動することです:

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }
        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }

ここまでで、作業は完了です:

4. ダブルフライウィングレイアウト

ダブルフライウィングレイアウトの最初の 2 つのステップは、中央の列のコンテンツがブロックされる問題の解決策が異なることを除いて、聖杯レイアウトと同じです:

メイン部分のコンテンツはブロックされるため、メイン部分内でコンテンツを追加し、オクルージョンを避けるためにマージンを設定すると、問題は解決できます:

nbsp;html>


    <style>
        .main {
        float: left;
        width: 100%;
        }
        .content {
        height: 200px;
        margin-left: 110px;
        margin-right: 220px;
        background-color: green;
        }
        
        .main::after {
        display: block;
        content: &#39;&#39;;
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
        }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        background-color: blue;
    }   
    </style>


    <p>
        </p><p></p>
    
    <p></p>
    <p></p>

注意すべき唯一のことは、後に要素を追加する必要があることです。フロートをクリアするメイン。

5. Flex レイアウト

Flex レイアウトがトレンドです。Flex を使用して 3 列レイアウトを実装することも非常に簡単ですが、ブラウザの互換性に注意する必要があります。

        <style>
            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }
            .left {
                height: 200px;
                order: -1;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }
            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        </style>
    
    
        <p>
            </p><p>fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p></p>
            <p></p>
        
    

注:

1. main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1

2. flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果

6. 绝对定位

绝对定位的方式也比较简单，而且可以优先加载主体：

        <style>
            .container {
            }
            .middle {
                position: absolute;
                left: 200px;
                right: 200px;
                height: 300px;
                background-color: yellow;
            }
            .left {
                position: absolute;
                left: 0px;
                width: 200px;
                height: 300px;
                background-color: red;
            }
            .right {
                position: absolute;
                right: 0px;
                width: 200px;
                background-color: green;
                height: 300px;
            }
        </style>
    
    
        <p>
            </p><p>fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p></p>
            <p></p>
        
    

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS怪异盒模型和标准盒模型如何使用

CSS实现手风琴布局

以上がCSSの3カラムレイアウトを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。