CSS创建两栏布局（左侧宽度固定，右侧宽度自适应）的几种方式

---

方式1：使用浮动 + margin

适用于已知左侧元素宽度的情况。

<div class="left"></div>
<div class="right"></div>

.left {
   
  width: 200px;
  height: 100px;
  background-color: green;
  float: left;
}

.right {
   
  height: 100px;
  background-color: red;
  margin-left: 200px;
}

效果如图：

其实我们不指定右侧div的margin也可以，这时右侧div的宽度是100%，而左侧div因为浮动了，所以会覆盖在右侧的div上。

方式2：使用绝对定位 + margin

适用于已知左侧元素宽度的情况。

.left {
   
  width: 200px;
  height: 100px;
  background-color: green;
  position: absolute;  /* 只改变了这一行代码 */
}