css实现两列固定与一列自适应的几种方法

CSS实现两列固定与一列自适应的几种方法：

1. 使用flex布局

Flex布局是CSS3中一种新的布局方式，它可以轻松地实现多种布局效果，例如两列固定与一列自适应。

通过设置父容器的flex属性为1，可以使左右两列固定，同时设置中间列的flex属性为auto，即可使其自适应宽度。例如：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left, .right {
  width: 200px;
}

.middle {
  flex: 1;
}

其中，左右两列的宽度为200px，中间列使用flex属性自适应宽度。

2. 使用绝对定位

使用绝对定位也可以实现两列固定与一列自适应的布局效果。通过设置左右两列的position属性为fixed，可以实现固定效果，同时设置中间列的margin值为左右两列宽度之和，即可让中间列自适应宽度。

.left {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
}

.right {
  position: fixed;
  top: 0;
  right: 0;
  width: 200px;
}

.middle {
  margin: 0 200px;
}

其中，左右两列的宽度为200px，中间列使用margin值自适应宽度。

3. 使用CSS Grid布局

CSS Grid布局也可以实现两列固定与一列自适应的布局效果。通过设置网格模板，可以让左右两列固定，而中间列使用grid-auto-columns属性自适应宽度。

.container {
  display: grid;
  grid-template-columns: 200px auto 200px;
}

.left, .right {
  position: fixed;
  top: 0;
  width: 200px;
}

.middle {
  grid-auto-columns: 1fr;
  margin: 0 auto;
}

其中，左右两列的宽度为200px，中间列使用grid-auto-columns属性自适应宽度。

总结：

以上三种方法都可以实现两列固定与一列自适应的布局效果，具体使用哪种方法，可以根据实际情况进行选择。使用flex布局代码较简洁，但兼容性稍低；使用绝对定位适用范围广，只要浏览器支持CSS2即可；使用CSS Grid布局可以提供更灵活的布局方式，但也有兼容性问题。