如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

1. 两栏布局与三栏布局

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，这种布局适用于内容上具有明显主次关系的网页。

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。大家最常见的就是 GitHub。

2. 两栏布局的实现

方案一：float + margin-left

<style>
    .box {
        overflow: hidden;  /* 添加 BFC */
    }
    .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

方案二：flex 弹性布局（推荐）

<style>
    .box {
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

注意：flex 容器的一个默认属性值 align-items: stretch，会让列等高。为了让这两个盒子高度自动，需要设置 align-items: flex-start。

3. 三栏布局的实现

常见方案：圣杯布局、双飞翼布局、flex、grid。

圣杯布局

左右固定，中间自适应：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
      height: 100%;
      overflow: hidden;
    }
    .container {
      height: 100%;
      padding: 0 200px;
    }
    .left, .right {
      width: 200px;
      min-height: 200px;
      background-color: lightblue;
    }
    .center {
      width: 100%;
      min-height: 400px;
      background-color: pink;
    }
    .center, .left, .right {
      float: left;
    }
    .left {
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right {
      margin-right: -200px;
    }
  </style>
</head>
<body>
  <div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
      width: 100%;
      overflow: hidden;
    }
    .container {
      width: 100%;
    }
    .container, .left, .right {
      float: left;
    }
    .left, .right {
      width: 200px;
      min-height: 200px;
      background-color: lightblue;
    }
    .center {
      margin: 0 200px;
      min-height: 400px;
      background-color: pink;
    }
    .left {
      margin-left: -100%;
    }
    .right {
      margin-left: -200px;
    }
  </style>
</head>
<body class="clearfix">
  <div class="container">
    <div class="center"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</body>
</html>

clearfix（清除浮动公共类）

.clearfix::after, .clearfix::before {
    content: "";
    display: block;
    clear: both;
}

补充：现代项目里两栏 / 三栏布局大多使用 flex / grid 一行解决：

• 两栏：display: flex; + flex: 1；
• 三栏：display: grid; grid-template-columns: 200px 1fr 200px;。 圣杯/双飞翼布局主要是面试用来考察 float + margin 负值技巧，实际生产中已基本不再使用。