CSS3で複数列レイアウトを実装する方法は何ですか

CSS3 で複数列レイアウトを実装する方法: 1. float を使用して複数列レイアウトを実装する; 2. インライン ブロック ボックス モデルを使用して複数列レイアウトを実装する; 3. 「display: flex」を使用する" 複数列レイアウトを実装するエラスティック レイアウト ; 4. 複数列レイアウトを実装するには、「display: table」メソッドを使用します。

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

css を使用して複数列レイアウトを実装するいくつかの方法

If次の 3 つの div が同じ行に表示されます。

#

<div id="parent">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

1: float はマルチ列レイアウト

float 属性は、ターゲット HTML コンポーネントをフローティングするかどうか、およびフローティングする方法を制御します。このプロパティを設定すると、オブジェクトはブロック コンポーネントとして扱われます。 4 つの浮動小数点値があります: left (左に浮動)、Right (右に浮動)、none (浮動ではない)、inherit (親要素の値を継承)。フローティング要素の次の兄弟要素も同じフローティング方向に設定されている場合、その要素は新しい要素の直後に表示されます。

float を設定すると、要素は通常のドキュメント フローから切り離されます。親要素は引き伸ばされないため、この時点では #parent の高さは 0 です。

    #parent>div{
        border:1px solid black;
        float:left;
        width:200px;
        height:200px;
        text-align: center;
 
    }
   #box1{
       background-color:red;
   }
   #box2{
       background-color:yellow;
   }
    #box3 {
        background-color:blue;
    }

これを行うこともできます。box1 と box2 を左にフローティングし、box3 をフロートしないように設定します。 box1 と box2 は float に設定されているため、通常のドキュメント フローから切り離されます。 box3 の場合は、その前に box1 と box2 が存在しないようになり、box3 もこの行に表示されますが、box1 によってブロックされます。 box3 の margin-left:400px; を設定すると、box1 と box2 の後ろに表示されるようになります。このとき #parent は box3 で開かれており、高さは 202px になっています。

    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
 
    }
    #box1{
       float:left;
        background-color:red;
    }
    #box2{
        float:left;
        background-color:yellow;
    }
    #box3 {
        margin-left:400px;
        background-color:blue;
    }

2: インライン ブロック ボックス モデル

インライン ブロック ボックス モデルの要素は 1 行を占めませんが、幅と高さの使用もサポートします。幅と高さを指定します。 display:inline-block はオブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングされます。後続のインライン オブジェクトは同じ行に配置されます。通常、上を揃えるにはvertical-align:topを設定する必要があります。

    #parent>div{
        display:inline-block;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

インラインブロックの水平方向にレンダリングされた要素は、改行で表示するかスペースで区切って表示するとギャップが生じます。スペースを削除すると自然に隙間が消えて隙間が表示されなくなります。

<div id="parent">
    <div id="box1">1</div><div id="box2">2</div><div id="box3">3</div>
</div>

3: display: flex フレキシブル レイアウト

#parent コンテナの diaplay:flex を設定します。親コンテナはフレキシブル ボックスに相当します。内部の div は、flex-direction で設定されたパターンに従って配置されます。 Flex フレキシブル レイアウトの機能は比較的強力で、ボックス モデルに最大限の柔軟性を提供して複雑なレイアウトを実装でき、任意のコンテナを Flex レイアウトとして指定できます。 flex-direction 属性は主軸の方向を決定します。flex-direction: row; は親コンテナ内の水平配置を意味し、flex-direction: column; は親コンテナ内の垂直配置を意味します。

    #parent{
        display: flex;
        flex-direction: row;
    }
    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

4: display: table

display:table この属性が設定された要素は、

#parent{
        display: table;
    }
    #parent>div{
        display:table-cell;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }