圣杯布局&&双飞翼布局

事实上，圣杯布局和双飞翼布局其实就是一回事，只是二者的实现思想不同而已。

简单来说就是两边顶宽，中间自适应的三栏布局，话不多说，直接上图：

首先我们说圣杯布局，它的原理主要是通过给中间三栏的center设置左右padding往内挤，使得左侧右侧center的内容不会被left和right部分覆盖掉，差不多酱紫。来，直接看代码：

 <div id="header">#header</div>
    <div id="container">
        <div id="center">#center</div>
        <div id="left">#left</div>
        <div id="right">#right</div>
    </div>
    <div id="footer">#footer</div>

body {
        min-width: 550px;
        font-weight: bold;
        font-size: 20px;
    }
    #header,
    #footer {
        background: rgba(29, 27, 27, 0.726);
        text-align: center;
        height: 60px;
        line-height: 60px;
    }
    #container {
        height: 200px;
        overflow: hidden;
        padding: 0 150px 0 200px;
    }
    #left,
    #right,
    #center {
        float: left;
        height: 200px;
    }
    #center {
        width: 100%;
        background: rgb(206, 201, 201);
    }
    #left {
        width: 200px;
        background: rgba(95, 179, 235, 0.972);
        position: relative;
        margin-left: -100%;
        left: -200px;
    }
    #right {
        width: 150px;
        background: rgb(231, 105, 2);
        position: relative;
        margin-left: -150px;
        right: -150px;
    }

然后又我们说双飞翼布局，它的原理主要是通过给中间三栏的center设置外层div，使得他成为子元素，再对子元素设置margin来实现，差不多酱紫。来，直接看代码：

  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">
      <div class="content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>

  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
  }
  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
    overflow: hidden;
  }
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #left, #right, #center {
    float: left;
  }
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;
    margin-left: -150px;
    background: rgb(231, 105, 2);
  }
  .content {
    margin: 0 150px 0 200px;
  }

基于很多方法可以实现这两种布局，还有flex辅助方法也可以轻松实现，大家可以多去尝试，个人认为CSS还是比较难的，哈哈，所以就多调一调，多花点心思，应该会好点。

好啦，本期分享就到这里啦，欢迎大家留言讨论，今天附上一段很喜欢的文字 ……………… && 小屋Niki

他们都爱你长大后的高光，爱你限时的漂亮，爱你琳琅满目，
但是阿月，我爱你炙热善良，爱你庸庸碌碌太寻常。