CSS Float を使用して 2 つの Div を並べて配置するにはどうすればよいですか?

CSS で 2 つの Div を並べて配置する方法

CSS では、float プロパティを使用して 2 つの div を並べて配置できます。

フローティング ワンDiv

ある div を別の div の隣にフローティングするには、float を追加します。プロパティを目的の div に設定します。これにより、div がラッパーの左側に移動します。

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    float: left; /* Float div to the left */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* Prevent text wrapping below #first */
}

両方の Div をフローティング

両方の div を隣り合わせてフローティングするには、float を追加します。 ： 左;両方の div にプロパティを追加します。ただし、overflow: hidden; を追加する必要がある場合があります。

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* Prevent floated divs from extending beyond wrapper */
}
#first {
    width: 300px;
    float: left; /* Float div 1 to the left */
    border: 1px solid red;
}
#second {
    float: left; /* Float div 2 to the left */
    border: 1px solid green;
}

これらの float プロパティを使用すると、ラッパー div 内に 2 つの div を並べて配置できます。緑色の div の高さによって、ラッパー全体の高さが決まります。

以上がCSS Float を使用して 2 つの Div を並べて配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。