CSS实现两栏布局，左边固定，右边自适应的4种方法

下面是完整攻略：

CSS实现两栏布局，左边固定，右边自适应的4种方法

在Web开发中，实现两栏布局是常见需求之一。其中，左边固定，右边自适应的布局方式也是较为普遍的一种，本文介绍4种实现这种布局方式的方法。

方法一：float布局

这是一种比较早期的实现方式，通过设置左边固定宽度，右边使用float属性浮动使得自适应宽度。

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

.container {
  width: 100%;
  overflow: hidden;
}
.left {
  width: 200px;
  float: left;
  background-color: #ccc;
}
.right {
  margin-left: 200px;
  background-color: #eee;
}

方法二：absolute + margin布局

使用绝对定位+margin布局也可以实现这种效果。

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

.container {
  position: relative;
  overflow: hidden;
}
.left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: #ccc;
}
.right {
  margin-left: 200px;
  background-color: #eee;
}

方法三：flex布局

使用flex布局也可以很方便地实现这种效果。

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

/*flex布局*/
.container {
  display: flex;
  flex-wrap: nowrap;
}
.left {
  width: 200px;
  background-color: #ccc;
}
.right {
  flex-grow: 1;
  background-color: #eee;
}

方法四：grid布局

使用较新的CSS网格布局也可以实现这种布局方式。

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

/*grid布局*/
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.left {
  background-color: #ccc;
}
.right {
  background-color: #eee;
}

示例说明

以方法一float布局为例，代码中.container是容器，其中有一个左边固定宽度，一个右边使用margin-left属性来撑满剩下的宽度。其中，.left设置了width和float属性，.right只设置了margin-left属性。同时为了防止出现margin重叠的情况，在.container上设置了overflow: hidden属性。

而对于方法三flex布局，代码中.container是容器，使用display:flex属性，左边设置了固定宽度，右边使用flex-grow:1将其撑满剩下的宽度。

这4种方法都可以很好地实现左边固定，右边自适应的布局方式，实现方式不同，但原理都是相似的。对于使用哪种方法，可以根据项目需求和个人喜好来选择。