如何使用 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中文网其他相关文章！