CSS实现左侧固定，右侧自适应(5种方法)

在CSS中，可以通过多种方法实现左侧固定，右侧自适应的布局。以下是五种主要的实现方法：

1. Flexbox布局
2. Grid布局
3. 浮动（Float）
4. 绝对定位与负边距
5. 表格布局（Table）

以下是每种方法的示例代码：

1. Flexbox布局

.container {
  display: flex;
}
 
.sidebar {
  flex: 0 0 200px; /* 固定宽度 */
  background: #f9f9f9;
}
 
.main {
  flex: 1; /* 自适应宽度 */
  overflow: hidden;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

2. Grid布局

.container {
  display: grid;
  grid-template-columns: 200px auto; /* 固定左侧宽度，右侧自适应 */
}
 
.sidebar {
  background: #f9f9f9;
}
 
.main {
  overflow: hidden;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

3. 浮动布局

.sidebar {
  float: left;
  width: 200px; /* 固定宽度 */
  background: #f9f9f9;
}
 
.main {
  overflow: hidden;
}

<div class="sidebar"></div>
<div class="main"></div>
<div style="clear: both;"></div>

4. 绝对定位与负边距

.container {
  position: relative;
}
 
.sidebar {
  position: absolute;
  width: 200px; /* 固定宽度 */
  background: #f9f9f9;
}
 
.main {
  margin-left: 200px; /* 与固定宽度对应 */
  overflow: hidden;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

5. 表格布局

.container {
  display: table;
  width: 100%;
  table-layout: fixed;
}
 
.sidebar {
  display: table-cell;
  width: 200px; /* 固定宽度 */
  background: #f9f9f9;
}
 
.main {
  display: table-cell;
  overflow: hidden;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

以上五种方法各有优缺点，可以根据具体场景选择最适合的方法。