圣杯布局与双飞翼布局

圣杯布局

    <div class="app">
        <div id="content">
            <!-- 中间内容优先渲染-->
            <div id="center" class="item">222</div>
            <div id="left" class="item">111</div>
            <div id="right" class="item">333</div>
        </div>
    </div>

    #content{
        padding:0 200px;
        .item {
            height:200px;
            float: left;
            position: relative;
          }
          #left{
            background-color: #f70303;
            width: 200px;
            margin-left: -100%;
            left: -200px;
          }
          #center{
            background-color: #04fd04;
            width: 100%;
          }
          #right{
            background-color: #3803fa;
            width: 200px;
            margin-left: -200px;
            right: -200px;
          }
    }

运行结果如下：

 

双飞翼布局

 <!-- 在圣杯基础的结构的基础上,中间容器里面嵌套了一个子容器,解决了圣杯用定位进行再次移动的问题
  双飞翼布局,没有定位进行位置的移动,简化了圣杯的代码(定位)
  -->
    <div id="parent">
      <div id="center">
        <div id="inner">inner</div>
      </div>
      <div id="left">left</div>
      <div id="right">right</div>
    </div>

    <!-- 双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案。
    主要是优化了圣杯布局中开启定位的问题。 -->
    * {
        margin: 0;
        padding: 0;
      }

      #parent {
        height: 500px;
      }

      #left,
      #center,
      #right {
        float: left;
      }

      #left,
      #right {
        width: 300px;
      }
      #left {
        background-color: #c9394a;
        margin-left: -100%;
      }

      #center {
        width: 100%;
        background-color: green;
      }

      #right {
        background-color: #cccccc;
        margin-left: -300px;
      }
      #inner {
        height: 300px;
        background-color: hotpink;
        margin-left: 300px;
        margin-right: 300px;
      }

运行结果如下：