前端基础之双飞翼和圣杯布局

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

在前端开发中，我们经常会遇到三列布局，这次我们可以来详细的了解一下三列布局的原理与不同。

三列布局主要是指头部和底部拥有浏览器的窗口宽度，中间三列两侧宽度固定，中间自适应的布局方式。整体高度则是以三列中最高的为准

圣杯布局

首先我们需要建立一个整体div，然后在里面建立三个小div，分别是中间模块以及左右两个模块，然后在里面填充一些内容用以帮助区分。

为什么我们需要把中间放到前面来呢，把左边放到中间前面可以吗，当然可以，因为我们把中间放到前面是希望能够更早渲染中间部分。

<div class="container">
    <div class="middle">
      <div class="inner">
        <h4>middle</h4>
        <p>
          middle
        </p>
      </div>
    </div>
    <div class="left">
      <h4>left</h4>
      <p>
        left
      </p>
    </div>
    <div class="right">
      <h4>right</h4>
      <p>
        right
      </p>
    </div>
  </div>

在建立了dom结构之后，我们开始写样式了，首先我们需要给中间三个模块设置float:left来使其脱离文档流以方便我们安排位置，然后给middle模块设置宽度100%，左右模块分别设置宽度，然后此时还需要给父元素设置一个固定高度或者设置overflow:hidden来形成bfc解决高度问题。

    .container {
      overflow: hidden;
    }
    .left,
    .middle,
    .right {
      float: left;
      min-height: 130px;
      word-break: break-all;
    }
    .left {
      width: 200px;
      background-color: red;
    }
    .right {
      width: 220px;
      background-color: green;
    }
    .middle {
      width: 100%;
      height: 100%;
      background-color: blue;
    }

到目前为止左右两块会因为第一排宽度不够导致被挤到第二排来，那么我们将需要在第一排给左右两块保留一定的空间，然后再将它们移动到对应位置，首先需要给父元素的左右两边添加一个内边距和左右模块的宽度相同，然后给左右模块设置一个等宽的负边距让他们来到同一排，最后再设置一个相对位移，并设置位移,便完成了。

    .container {
      overflow: hidden;
      padding: 0 220px 0 200px;

    }

    .left,
    .middle,
    .right {
      float: left;
      min-height: 130px;
      word-break: break-all;
    }
    .left {
      margin-left: -100%;
      width: 200px;
      background-color: red;
      position: relative;
      left: -200px;
    }
    .right {
      margin-left: -220px;
      width: 220px;
      background-color: green;
      position: relative;
      left: 220px;
    }
    .middle {
      width: 100%;
      height: 100%;
      background-color: blue;
    }

双飞翼布局

双飞翼布局大体其实和圣杯布局差不多主要是多了一层结构，他在middle中间新增了一层结构，然后以新增的这层结构来作为真正的middle，因为同样是通过设置负边距来让三列成为同一行，然后取消父结构的内边距这样就使左右两块遮掩了middle的部分内容，然后设置新结构的外边距，让新结构在中间未被覆盖处正常展示，达到左右固定，中间自适应的目的

.container {
      overflow: hidden;
    }

    .left,
    .middle,
    .right {
      float: left;
      min-height: 130px;
      word-break: break-all;
    }
    .left {
      margin-left: -100%;
      width: 200px;
      background-color: red;
    }
    .right {
      margin-left: -220px;
      width: 220px;
      background-color: green;
    }
    .middle {
      width: 100%;
      height: 100%;
      background-color: blue;
    }

    .inner {
      margin: 0 220px 0 200px;
      min-height: 130px;
      background: blue;
      word-break: break-all;
    }