如何使用 CSS 浮動並排放置兩個 Div？

如何在CSS 中並排放置兩個div

在CSS 中，您可以使用浮動屬性將兩個div 彼此相鄰放置。

漂浮一號Div

要將一個 div 浮動到另一個 div 旁邊，請新增 float: left;屬性到所需的 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 彼此相鄰浮動，請添加浮動： 左邊;兩個 div 的屬性。但是，您可能需要添加溢出：隱藏；到包裝器 div 以防止 div 擴展超出包裝器寬度。

#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;
}

透過使用這些浮動屬性，您可以在包裝器 div 中並排放置兩個 div。綠色 div 的高度將決定包裝器的整體高度。

以上是如何使用 CSS 浮動並排放置兩個 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！