如何用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: lightblue;
}

.flexible-width {
  flex-grow: 1; /* 自适应宽度 */
  background-color: lightcoral;
}

方法二：使用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: lightblue;
}

.flexible-width {
  background-color: lightcoral;
}

解释

• Flexbox布局：

  • display: flex; 将容器设置为Flexbox布局。
  • flex-grow: 1; 使 .flexible-width 占据剩余的空间。
  • .fixed-width 的宽度固定为200px。

• Grid布局：

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

选择哪种方法？

• 如果你需要更简单的布局并且不需要复杂的网格结构，Flexbox是一个很好的选择。
• 如果你需要更复杂的布局，或者需要同时控制行和列，Grid布局可能更适合。

这两种方法都可以很好地实现固定宽度和自适应宽度的结合，具体选择哪种方法取决于你的具体需求和布局复杂度。