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

CSS实现两列固定和一列自适应是前端开发中一个常见的案例。以下是几种实现方法：

CSS实现两列固定和一列自适应是前端开发中一个常见的案例。以下是几种实现方法：

方法一：使用float属性

使用float属性可以将左右两列设置为固定宽度，中间一列设置为自适应宽度。具体步骤如下：

1. HTML结构：

<div class="container">
  <div class="left-column"></div>
  <div class="right-column"></div>
  <div class="middle-column"></div>
</div>

1. CSS样式：

.container {
  overflow: hidden;
}

.left-column {
  width: 200px;
  float: left;
}

.right-column {
  width: 200px;
  float: right;
}

.middle-column {
  margin: 0 200px;
}

上述代码中，左右两列的宽度都为200像素，通过float属性设置其位置，中间一列的宽度则通过设置margin值来实现。

方法二：使用Flexbox布局

使用Flexbox布局也可以实现两列固定和一列自适应。具体步骤如下：

1. HTML结构：

<div class="container">
  <div class="left-column"></div>
  <div class="right-column"></div>
  <div class="middle-column"></div>
</div>

1. CSS样式：

.container {
  display: flex;
}

.left-column {
  width: 200px;
}

.right-column {
  width: 200px;
}

.middle-column {
  flex: 1;
}

上述代码中，使用display属性将容器设置为Flexbox布局，设置左右两列的固定宽度，通过设置中间一列的flex属性来实现自适应宽度。

示例说明：

以“阿里巴巴”官网为例，官网的头部和左侧栏都是固定宽度的，右侧内容部分则是自适应宽度的。这种布局方式可以使用方法一的float属性实现。

另一个示例是“腾讯课堂”网站的课程页，页面左侧和右侧是固定宽度的，中间的课程列表部分则是自适应宽度的。这种布局方式可以使用方法二的Flexbox布局实现。