如何用CSS优雅地实现一个固定宽度div和一个自适应剩余空间的div布局？

要实现一个固定宽度的 div 和一个自适应剩余空间的 div 布局，可以使用 CSS 的 flexbox 或 grid 布局。以下是两种方法的实现：

方法一：使用 Flexbox

Flexbox 是一种非常灵活的布局方式，适合处理这种需求。

<div class="container">
  <div class="fixed-width">固定宽度</div>
  <div class="flexible-width">自适应宽度</div>
</div>

.container {
  display: flex;
}

.fixed-width {
  width: 200px; /* 固定宽度 */
  background-color: #ccc;
}

.flexible-width {
  flex-grow: 1; /* 自适应剩余空间 */
  background-color: #f0f0f0;
}

解释： - display: flex; 将容器设置为 flex 布局。 - fixed-width 设置了固定宽度（例如 200px）。 - flexible-width 使用 flex-grow: 1; 来占据剩余的空间。

方法二：使用 Grid

CSS Grid 也是一种强大的布局工具，适合处理复杂的布局需求。

<div class="container">
  <div class="fixed-width">固定宽度</div>
  <div class="flexible-width">自适应宽度</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 第一列固定宽度，第二列自适应 */
}

.fixed-width {
  background-color: #ccc;
}

.flexible-width {
  background-color: #f0f0f0;
}

解释： - display: grid; 将容器设置为 grid 布局。 - grid-template-columns: 200px 1fr; 定义了两列，第一列固定宽度为 200px，第二列使用 1fr 来占据剩余的空间。

方法三：使用 Float 和 Calc

虽然 Flexbox 和 Grid 是更现代和推荐的方式，但你也可以使用 float 和 calc 来实现这种布局。

<div class="container">
  <div class="fixed-width">固定宽度</div>
  <div class="flexible-width">自适应宽度</div>
</div>

.container {
  overflow: hidden; /* 清除浮动 */
}

.fixed-width {
  width: 200px; /* 固定宽度 */
  float: left;
  background-color: #ccc;
}

.flexible-width {
  width: calc(100% - 200px); /* 自适应剩余空间 */
  float: left;
  background-color: #f0f0f0;
}

解释： - float: left; 将两个 div 浮动到左侧。 - calc(100% - 200px); 计算剩余宽度并应用到自适应宽度的 div 上。 - overflow: hidden; 用于清除浮动，防止容器塌陷。

总结

• Flexbox 是最简单和推荐的方式，适合大多数场景。
• Grid 提供了更强大的布局控制，适合复杂的布局需求。
• Float 和 Calc 是一种传统的方式，虽然可以实现，但在现代布局中不推荐使用。

根据你的具体需求和浏览器兼容性要求，选择合适的方法来实现布局。