CSSで3列レイアウトを実装するにはどのような方法がありますか?-CSSチュートリアル-php.cn

3 列レイアウトを実装する Css メソッド: 1. float フローティングレイアウト、2. 絶対配置レイアウト、3. IE では互換性の問題があり、IE9 以降のみをサポートできるフレックスボックスエラスティックレイアウト、4. テーブルテーブルレイアウトは、検索エンジンが情報を巡回するのに役立ちません。 5. グリッドレイアウトは互換性が低いです。

CSSで3列レイアウトを実装するにはどのような方法がありますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

3 列レイアウトは、名前が示すように、両側が固定され、中央が適応されます。 3 列レイアウトは、実際の開発では非常に一般的です。たとえば、淘宝網のホームページは典型的な 3 列レイアウトです: 左側の製品ナビゲーションと右側のナビゲーションは固定幅で、中央のメインコンテンツはそれに適応しますブラウザの幅に合わせます。

CSSで3列レイアウトを実装するにはどのような方法がありますか?

高さは既知で、左列と右列の幅はそれぞれ 300 ピクセル、中央は適応型であるというようなレイアウトを想定することもできます。多くの方法が実現できるでしょうか？そして、それぞれの長所と短所は何ですか?

1. フローティングレイアウト

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="screen">
        html * {
            padding: 0;
            margin: 0;
        }
        .layout article div {
            min-height: 150px;
        }
    </style>
</head>
<body>
    <!--浮动布局  -->
    <section class="layout float">
        <style media="screen">
            .layout.float .left {
                float: left;
                width: 300px;
                background: red;
            }
            .layout.float .center {
                background: yellow;
            }
            .layout.float .right {
                float: right;
                width: 300px;
                background: blue;
            }
        </style>
        <h1>三栏布局</h1>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div> // 右栏部分要写在中间内容之前
            <div class="center">
                <h2>浮动解决方案</h2>
                1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
            </div>
        </article>
    </section>
</body>
</html>

ログイン後にコピー

このレイアウト方法では、DOM 構造は最初にフローティング部分を記述し、次に中央のブロックを記述する必要があります。それ以外の場合は、右側のフローティングブロックは次の行にドロップされます。
フローティングレイアウトの利点は、比較的シンプルで互換性が高いことです。ただし、フローティングレイアウトには制限があり、フローティング要素はドキュメントフローから外れるためクリアする必要があり、これをうまく処理しないと、親コンテナの高さが崩れるなど、多くの問題が発生します。

2. 絶対位置レイアウト

<!--绝对布局  -->
 <section class="layout absolute">
     <style>
         .layout.absolute .left-center-right>div{
             position: absolute;//三块都是绝对定位
         }
         .layout.absolute .left {
             left:0;
             width: 300px;
             background: red;
         }
         .layout.absolute .center {
             right: 300px;
             left: 300px;//离左右各三百
             background: yellow;
         }
         .layout.absolute .right {
             right: 0;
             width: 300px;
             background: blue;
         }
     </style>
     <h1>三栏布局</h1>
     <article class="left-center-right">
         <div class="left"></div>
         <div class="center">
             <h2>绝对定位解决方案</h2>
             1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
         </div>
         <div class="right"></div>
     </article>
 </section>

ログイン後にコピー

絶対位置レイアウトの利点は、セットアップが速く、セットアップが簡単で、問題が発生しにくいことです。デメリットとしては、コンテナがドキュメントフローから切り離されており、子孫要素もドキュメントフローから切り離されているため、高さが不明な場合に問題が発生し、有効性やユーザビリティが相対的に低いという点です。

3. Flexbox レイアウト

<!--flexbox布局-->
<section class="layout flexbox">
    <style>
        .layout.flexbox .left-center-right{
            display: flex;
        }
        .layout.flexbox .left {
            width: 300px;
            background: red;
        }
        .layout.flexbox .center {
            background: yellow;
            flex: 1;
        }
        .layout.flexbox .right {
            width: 300px;
            background: blue;
        }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>flexbox解决方案</h2>
            1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </article>
</section>

ログイン後にコピー

Flexbox レイアウトは css3 の新しいレイアウトで、上記 2 つの方法の欠点を解決するように設計されており、比較的完璧です。。現在、モバイル端末のレイアウトにもフレックスボックスが使用されています。フレックスボックスの欠点は、IE10 でサポートが開始されることですが、IE10 は -ms 形式であることです。

4. テーブルレイアウト

<!--表格布局-->
    <section class="layout table">
        <style>
            .layout.table .left-center-right {
                display: table;
                height: 150px;
                width: 100%;
            }
            .layout.table .left-center-right>div {
                display: table-cell;
            }
            .layout.table .left {
                width: 300px;
                background: red;
            }
            .layout.table .center {
                background: yellow;
            }
            .layout.table .right {
                width: 300px;
                background: blue;
            }
        </style>
        <h1>三栏布局</h1>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>表格布局解决方案</h2>
                1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
            </div>
            <div class="right"></div>
        </article>
    </section>

ログイン後にコピー

テーブルレイアウトの互換性は非常に優れています (下の図を参照)。フレックスレイアウトに互換性がない場合は、テーブルレイアウトを試すことができます。コンテンツがオーバーフローすると、親要素が自動的に展開されます。

テーブルレイアウトにも欠点があり、①列の余白が設定できない、②SEOに優しくない、③どちらかのセルの高さが超えると両側のセルも高さになってしまう。ただし、これが私たちが望む効果ではない場合もあります。

CSSで3列レイアウトを実装するにはどのような方法がありますか?

5. グリッドレイアウト

<!--网格布局-->
<section class="layout grid">
    <style>
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 150px;//行高
        }
        .layout.grid .left {
            background: red;
        }
        .layout.grid .center {
            background: yellow;
        }
        .layout.grid .right {
            background: blue;
        }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>网格布局解决方案</h2>
            1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </article>
</section>

ログイン後にコピー

CSS グリッドは、グリッドレイアウトを作成するための最も強力かつ最も簡単なツールです。テーブルと同様に、グリッドレイアウトを使用すると、Web デザイナーは要素を列または行に配置できますが、テーブルとは異なり、グリッドレイアウトにはコンテンツ構造がないため、さまざまなレイアウトをテーブルと同じにすることはできません。たとえば、グリッドレイアウト内の子要素はすべて、同様の要素が重複して配置されるように配置できます。

しかし、グリッドレイアウトの互換性は良くありません。 IE10 でサポートされており、一部の属性のみがサポートされています。

6. まとめ

1. フロートレイアウトは現在よく使われているレイアウトで、現在多くのポータルサイトでこのレイアウト方法が採用されています。フロートをクリアしてください。

2. ポジションレイアウトは、位置決め属性に基づいて要素の位置を直接設定するだけなので、個人的にはページレイアウトには向かないと感じます。互換性には問題ありません。検索エンジンが情報をクロールするのに役立ちません。

4. フレックスレイアウトは比較的強力ですが、IE にはまだ互換性の問題があり、IE9 までしかサポートできません。上記

5. グリッドレイアウトは非常に強力ですが、互換性のあるセックスは最悪です。

学習ビデオ共有:

css ビデオチュートリアル

以上がCSSで3列レイアウトを実装するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。