双飞翼布局和圣杯布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

双飞翼布局

    

        
中间
    
    
左边
    
右边

*{
           margin: 0;
            padding: 0;
        }
      .box{
          min-width: 400px;
          height: 100px;
          background: #CC00FF;
      }
        .left,.right{
            width: 200px;
            height: 100px;
            background: red;
            float: left;
        }
      .main{
          width: 100%;
          height: 100px;
          background: #330066;
          float: left;
      }
        .main_c{
            margin: 0 200px ;
        }
        .left{
            margin-left:  -100%;
        }
        .right{
            margin-left: -200px;
        }

效果：

圣杯布局

   body{
            margin: 0;
            padding: 0;

        }
        .x{
            min-width: 400px;
            height: 200px;
            background: #A00000;
            padding: 0 200px;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            background: #CC00FF;
            float: left;
        }
        .main{
            width: 100%;
            height: 200px;
            background: #252221;
            float: left;
        }
        .left{
            margin-left: -100%;
            position: relative;
            left:-200px;
        }
        .right{
            margin-left: -200px;
            position: relative;
            right: -200px;
        }

效果：