如何使用CSS优雅地实现左右两栏布局，左侧固定宽度，右侧自适应？

要实现一个左侧固定宽度、右侧自适应的两栏布局，可以使用多种CSS技术。以下是几种常见的方法：

方法1：使用浮动（Float）

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应</div>
</div>

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

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

.right {
  margin-left: 200px; /* 右侧自适应，留出左侧宽度 */
  background-color: #e0e0e0;
}

方法2：使用Flexbox

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应</div>
</div>

.container {
  display: flex;
}

.left {
  width: 200px; /* 左侧固定宽度 */
  background-color: #f0f0f0;
}

.right {
  flex-grow: 1; /* 右侧自适应 */
  background-color: #e0e0e0;
}

方法3：使用Grid布局

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左侧固定宽度，右侧自适应 */
}

.left {
  background-color: #f0f0f0;
}

.right {
  background-color: #e0e0e0;
}

方法4：使用绝对定位

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应</div>
</div>

.container {
  position: relative;
}

.left {
  position: absolute;
  width: 200px; /* 左侧固定宽度 */
  background-color: #f0f0f0;
}

.right {
  margin-left: 200px; /* 右侧自适应，留出左侧宽度 */
  background-color: #e0e0e0;
}

方法5：使用表格布局（Table Layout）

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应</div>
</div>

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  width: 200px; /* 左侧固定宽度 */
  background-color: #f0f0f0;
}

.right {
  display: table-cell;
  background-color: #e0e0e0;
}

总结

• 浮动（Float）：兼容性好，但需要清除浮动。
• Flexbox：现代布局方式，代码简洁，兼容性较好。
• Grid布局：最强大的布局方式，适合复杂布局，但兼容性稍差。
• 绝对定位：适合特定场景，但需要小心处理布局。
• 表格布局（Table Layout）：兼容性好，但语义化较差。

根据项目需求和浏览器兼容性要求，选择合适的方法来实现两栏布局。