2つのdivを並べて表示する方法

方法は次のとおりです: 1. 2 つの div 要素を「float:left;」属性に設定します。 2. CSS のフレックス レイアウトを使用して要素を簡単に並べて表示します。 3. CSS のグリッド レイアウトを使用して実装も行います。要素を並べて表示します。

2 つの div を並べて表示するには、次のメソッドを使用できます。

CSS で float 属性を使用します。 2 つの div を並べて表示するには、float 属性を使用します。div 要素は float:left; に設定されているため、並べて表示されます。サンプル コードは次のとおりです。

<style>
    .div1, .div2 {
        float: left;
        width: 50%; /* 两个div据父素宽度的一半 */
 }
</>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>

フレックス レイアウトを使用する: CSS のフレックス レイアウトを使用すると、要素を簡単に並べて表示できます。親要素の表示属性を flex に設定し、子要素の flex 属性を 1 に設定して、親要素の幅を均等に占めるようにします。サンプルコードは次のとおりです。

<style>
    .container {
        display: flex;
    }
    .div1, .div2 {
        flex: 1;
    }
</style>
<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

グリッド レイアウトを使用する: CSS グリッド レイアウトを使用すると、要素を並べて表示することもできます。親要素の表示属性を Grid に設定し、子要素の Grid-column 属性を設定して、グリッド内の子要素の位置を制御します。サンプルコードは以下のとおりです:

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 将父元素分为两列 */
    }
    .div1 {
        grid-column: 1; /* 第一列 */
    }
    .div2 {
        grid-column: 2; /* 第二列 */
    }
</style>
<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

上記はよく使われる3つの方法ですが、状況に応じて適切な方法を選択することで、2つのdivを並べて表示することができます。

以上が2つのdivを並べて表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。