CSS 如何将两个 div 并排放置，其中左侧的 div 大小自适应，右侧的 div 占据剩余空间

在本文中，我们将介绍如何使用 CSS 将两个 div 元素并排放置，其中左侧的 div 元素的大小自适应，右侧的 div 元素占据剩余空间的方法。

阅读更多：CSS 教程

方法一：使用 float 属性

左侧 div 右侧 div

CSS 代码如下：

.container {
overflow: hidden;
}

.left {
float: left;
}

.right {
overflow: hidden;
}

在上述代码中，我们首先创建了一个包含两个子元素的容器 div，分别是左侧 div 和右侧 div。然后，我们使用 float 属性将左侧 div 元素浮动到左侧，使其可以自适应大小。接着，我们给容器 div 添加 overflow:hidden 属性，这样可以清除浮动以避免布局问题。最后，我们给右侧 div 添加 overflow:hidden 属性，以防止其内容超出容器 div 的范围。

方法二：使用 Flexbox 布局

左侧 div 右侧 div

CSS 代码如下：

.container {
display: flex;
}

.left {
flex: 0 0 auto;
}

.right {
flex: 1 1 auto;
}

在上述代码中，我们同样创建了一个包含左侧和右侧两个子元素的容器 div。然后，我们使用 display:flex 属性将容器设置为 Flexbox 布局。接着，我们给左侧的 div 添加 flex: 0 0 auto 属性，这表示左侧 div 不会拉伸，且宽度根据内容自适应。最后，我们给右侧的 div 添加 flex: 1 1 auto 属性，这表示右侧 div 占据剩余空间的比例为 1:1。

使用上述两种方法中的任意一种，你可以轻松地将两个 div 并排放置，并满足左侧的 div 自适应大小，右侧的 div 占据剩余空间的需求。

此外，如果需要进一步自定义两个 div 的布局，可以使用其他 CSS 属性，如 margin、padding、width 等。根据实际需求，进行适当的调整即可。