css双飞翼布局

双飞翼布局

双飞翼布局和圣杯布局的实现大致相同但是唯一不同的一点是双飞翼布局分别向左移动后不需要在以自身的位置作为参考在把left，right盒子分别移动自身列的宽度只需要给center套一个盒子inner让内容与left，right盒子互不影响即可。

<div class="max clearfix">
        <div class="center">
            <div class="inner">
                aosjdoainosaincanscioasncoasncscoiancoiancoian
            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

 *{
           margin: 0;
           padding: 0;
       } 
       .clearfix::after{
           content: "";
           display: block;
           clear: both;
       }
       .max{
           /* width: 100%; 不能写100%加内边距会溢出 */
           width: auto;
           height: auto;
           
       }
       .max>div{
           float: left;
           height: 40px;
       }
       .center{
           width: 100%;
           background-color: blue;
       }
       .left{
           width: 200px;
           background-color: yellow;
           /* 1·向左移动中间列宽度 -ml：-100% */
           margin-left: -100%;
           
       }
       .right{
           width: 220px;
           background-color: red;
           /* 1·向左移动自身列宽度 -ml：-220px */
           margin-left: -220px;
           
       }
       .inner{
           /* 盒模型的特性 盒模型的宽度=有效内容宽度+外边距大小+padding+border width:auto默认取父盒子所有宽度 */
           margin: 0 220px 0 200px ;
       }

效果图如下