CSS 三栏布局方法总结

本文总结了三栏布局的几种常用方法，效果如下：

image

其中，左右分别为100px，中间自适应。

1. 浮动

html 代码:

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

css 代码:

      .container-float > div {
        height: 200px;
      }
      .container-float > .left {
        width: 100px;
        background: aliceblue;
        float: left;
      }
      .container-float > .center {
        background: antiquewhite;
        margin: 0 100px 0 100px;
      }
      .container-float > .right {
        width: 100px;
        background: aquamarine;
        float: right;
      }

缺点：

• 中间栏必须放在最后；
• 窗口缩小时，中间栏可能被覆盖，右边栏也可能被挤到下一行。

2. 绝对定位

html 代码:

        <div class="container-absolute">
          <div class="left">left</div>
          <div class="center">center</div>
          <div class="right">right</div>
        </div>

css 代码:

      .container-absolute {
        height: 200px;
        position: relative;
      }
      .container-absolute > div {
        height: 200px;
        position: absolute;
        top: 0;
      }
      .container-absolute .left {
        width: 100px;
        background: aliceblue;
        left: 0;
      }
      .container-absolute .center {
        background: antiquewhite;
        left: 100px;
        right: 100px;
      }
      .container-absolute .right {
        width: 100px;
        background: aquamarine;
        right: 0;
      }

缺点：

• 窗口缩小时，中间栏、左边栏可能会被覆盖;
• 使用绝对定位，要考虑与页面其他元素间的关系。

3. flex

html 代码:

        <div class="container-flex">
          <div class="left">left</div>
          <div class="center">center</div>
          <div class="right">right</div>
        </div>

css 代码:

      .container-flex {
        height: 200px;
        display: flex;
      }
      .container-flex > div {
        height: 200px;
      }
      .container-flex .left {
        width: 100px;
        background: aliceblue;
      }
      .container-flex .center {
        background: antiquewhite;
        flex: 1;
      }
      .container-flex .right {
        width: 100px;
        background: aquamarine;
      }

缺点：

• 窗口缩小时，左右两栏宽度可能会改变。

4. table

html 代码:

        <div class="container-table">
          <div class="left">left</div>
          <div class="center">center</div>
          <div class="right">right</div>
        </div>

css 代码:

      .container-table {
        height: 200px;
        width: 100%;
        display: table;
      }
      .container-table > div {
        height: 200px;
        display: table-cell;
      }
      .container-table .left {
        width: 100px;
        background: aliceblue;
      }
      .container-table .center {
        background: antiquewhite;
      }
      .container-table .right {
        width: 100px;
        background: aquamarine;
      }

缺点：

• 窗口缩小时，左右两栏宽度可能会改变。

5. grid

html 代码:

        <div class="container-grid">
          <div class="left">left</div>
          <div class="center">center</div>
          <div class="right">right</div>
        </div>

css 代码:

      .container-grid {
        height: 200px;
        width: 100%;
        display: grid;
        grid-template-rows: 200px;
        grid-template-columns: 100px auto 100px;
      }
      .container-grid .left {
        background: aliceblue;
      }
      .container-grid .center {
        background: antiquewhite;
      }
      .container-grid .right {
        background: aquamarine;
      }

6. 圣杯布局

html 代码:

        <div class="container-shengbei">
          <div class="left">left</div>
          <div class="center">center</div>
          <div class="right">right</div>
     
        </div>

css 代码:

      .container-shengbei {
        height: 200px;
        padding: 0 100px 0 100px;
      }
      .container-shengbei > div {
        float: left;
        position: relative;
        height: 200px;
      }
      .container-shengbei .left {
        width: 100px;
        background: aliceblue;
        margin-left: -100px;
      }
      .container-shengbei .center {
        width: 100%;
        background: antiquewhite;
      }
      .container-shengbei .right {
        width: 100px;
        background: aquamarine;
        right: -100px;
        margin-left: -100px;
      }

缺点：

• 窗口缩小时，中间栏可能被覆盖，右边栏也可能被挤到下一行。

7. 双飞翼布局

html 代码:

        <div class="container-shuangfei">
          <div class="center">
              <div class="inner">center</div>
          </div>
          <div class="left">left</div>
          <div class="right">right</div>
        </div>

css 代码:

      .container-shuangfei {
        height: 200px;
      }
      .container-shuangfei > div {
        float: left;
        position: relative;
        height: 200px;
      }
      .container-shuangfei .left {
        width: 100px;
        background: aliceblue;
        margin-left: -100%;
      }
      .container-shuangfei .center {
        width: 100%;
      }
      .container-shuangfei .center .inner{
          margin: 0 100px 0 100px;
          height: 200px;
          background: antiquewhite;
      }
      .container-shuangfei .right {
        width: 100px;
        background: aquamarine;
        margin-left: -100px;
      }

缺点：

• 窗口缩小时，中间栏、左边栏都可能被覆盖，整个布局可能会乱。