圣杯布局和双飞翼布局

圣杯布局和双飞翼布局所解决的问题是一样的，都是两边宽度写死，中间宽度可以实现自适应，
两种布局不同的地方在于中间被遮挡的时候，两种布局的解决方式不一样。
 

圣杯布局：

 

   <div class="container">
                    <div class="main">
                            中间部分
                    </div>

                    <div class="left">
                     left

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

                    </div>

            </div>

 .container{
                background: #eee;
                height: 200px;
                padding: 0 200px;
                min-width: 400px;
            }
            div{
                padding: 0;
                margin: 0;
            }
            .main{
                width: 100%;
                height: 200px;
                background: blue;
                float: left;
            }
            .left,.right{
                width: 200px;
                height: 200px;
                background-color: red;
                float: left;
            }
            .left{
                margin-left: -100%;/*父view的宽度*/
                position: relative;
                left: -200px;
            }
            .right{
                margin-left:-200px;/**自身的宽度*/
                position: relative;
                right: -200px;
            }
          

2.双飞翼布局

双飞翼布局其实就是在圣杯布局的基础上改编元素结构，不再适用定位，而是通过在main 里面新增一个div 通过margin 实现
 

 <div class="container">
                    <div class="main">

                        <div class="main_center">
                            中间部分 中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分中间部分
                        </div>
                            
                    </div>

                    <div class="left">
                     left

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

                    </div>

            </div>

 

 .container{
                background: #eee;
                height: 200px;
                min-width: 400px;
            }
            div{
                padding: 0;
                margin: 0;
            }
            .main{
                width: 100%;
                height: 200px;
                background: blue;
                float: left;
                
            }
            .left,.right{
                width: 200px;
                height: 200px;
                background-color: red;
                float: left;
            }
            .left{
                margin-left: -100%;/*父view的宽度*/
              
            }
            .right{
                margin-left:-200px;/**自身的宽度*/
                
            }
            .main_center{
                margin: 0 200px;
            }