HTML 和 CSS 实现两栏布局

Question

CSS 可以通过使用浮动、弹性盒子布局（Flexbox）、网格布局（Grid）等方式实现两栏布局。下面是三种常见的实现方式：

1. 浮动布局

HTML 结构：

<div class="container">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

CSS 样式：

.container {
  width: 100%;
  overflow: hidden;
}

.left {
  float: left;
  width: 200px;
  background-color: #f1f1f1;
}

.right {
  margin-left: 200px;
  background-color: #e1e1e1;
}

2. 弹性盒子布局（Flexbox）

HTML 结构：

<div class="container">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

CSS 样式：

.container {
  display: flex;
}

.left {
  width: 200px;
  background-color: #f1f1f1;
}

.right {
  flex: 1;
  background-color: #e1e1e1;
  overflow: hidden;
}

3. 网格布局（Grid）

HTML 结构：

<div class="container">
  <div class="left">左侧栏</div>
  <div class="right">右侧栏</div>
</div>

CSS 样式：

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

.left {
  background-color: #f1f1f1;
}

.right {
  background-color: #e1e1e1;
}