コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > 本文

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

青灯夜游
リリース： 2022-02-28 13:52:07
オリジナル
1805 人が閲覧しました

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

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

このチュートリアルの動作環境: 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>
ログイン後にコピー

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

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 この属性が設定された要素は、

と同様のブロックレベルのテーブルとして表示されます。
display:table-cell この属性セットを持つ要素は、
や と同様に表のセルとして表示されます。
この一連の table-row-group、table- を使用できます。 header-group、table-footer-group、table-row などは、他のタグを使用してテーブルのようなレイアウトを実装します。 

#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;
    }
ログイン後にコピー

(学習ビデオ共有: css ビデオ チュートリアル 、Web フロントエンド入門チュートリアル )

以上がCSS3で複数列レイアウトを実装する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 複数列のレイアウト
ソース：php.cn
前の記事：CSS3でトランジションアニメーションの時間を定義するために使用されるもの 次の記事：css3 の 2 つのボックス モデルの違いは何ですか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
グリッドを使用してこの特定のデザインを作成する: ステップバイステップ ガイド この画像に似たレイアウトを作成しようとしています。このグリッドを使用してみましたが、実現できません。 <ulclass="container">&l...
から 2024-04-06 20:29:08
0
2
492
強制更新は、Next.js の未定義のパスまたはエラー ページにアクセスした結果発生します。 未定義のパスまたはエラー ページにアクセスすると、Next.js がハード リフレッシュを実行し、コンテキストがデフォルトの状態に戻ります (つまり、userProfile 状態変...
から 2024-04-05 08:32:46
0
1
400
Shopware 6 プラグイン: ブール構成を削除して複数選択構成に移行する方法 現在、プラグインを通じて送信されたレビューを自動的に公開するブール型 reviewSkipModeration 値で構成されている Shopware6 プラグインがあります: co...
から 2024-04-03 23:09:28
0
1
410
複数のキャンバスからjpgをエクスポートする方法 レイヤーとして使用される複数のキャンバスがあります。 Canvasc1=backgroundimage.canvasc2=charactorimage.canvasc3=itemi...
から 2024-04-03 21:02:43
0
1
319
CSSのグリッドレイアウトのボックスプロトコル 最初の 2 つのボックスを最大幅で上に移動させ、2 番目のボックスを最大幅で下に移動させたいのです。コードは次のとおりです。これは CSS コードです: /*StartServic...
から 2024-04-03 16:36:04
0
2
334
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート