如何实现左右固定，中间自适应布局？

实现这种布局的常见方法是基于纯CSS。以下是标准且高效的方式：

1. 使用弹性布局 (Flexbox)

这是一种现代且简洁的方法。CSS示例如下：

.container {
  display: flex;
  justify-content: space-between; /* 确保间隔合理 */
  height: 100vh; /* 自适应高度 */
}

.left {
  width: 200px; /* 固定宽度 */
  background: #f3f3f3;
  flex-shrink: 0; /* 防止缩小 */
}

.middle {
  flex: 1; /* 自适应宽度 */
  background: #ffffff;
}

.right {
  width: 200px; /* 固定宽度 */
  background: #f3f3f3;
  flex-shrink: 0; /* 防止缩小 */
}  

关键点：

• display: flex 定义父容器为弹性盒子；
• .middle {flex: 1} 使其自动填充剩余空间；
• 设置 width 固定左右元素的宽度。

2. 使用网格布局 (Grid)

同样有效且灵活，HTML结构简单：

<div class="container">
  <div class="left">左侧固定</div>
  <div class="middle">中间自适应</div>
  <div class="right">右侧固定</div>
</div>  

相应CSS：

.container {
  display: grid;
  grid-template-columns: 200px auto 200px; /* auto使中间自适应 */
  height: 100%;
}

优势：无需额外容器即可实现三栏布局。

3. 其他适用方式

百分比 + CSS计算：

.left, .right {
  position: absolute; /* 通过绝对定位固定左右 */
  width: 200px;
}
.middle {
  margin: 0 200px; /* 中间自适应 */
}  

这种方法在老浏览器中兼容性强，但推荐优先使用Flex或Grid。
考虑适配不同屏幕尺寸时，建议结合媒体查询优化断点（如手机视图堆叠元素）。