双飞翼布局

上篇总结了圣杯布局，这篇文章总结一下双飞翼布局

双飞翼布局与圣杯布局不一样的地方就是中间设置的方式不一致

圣杯布局是通过父容器设置padding + box-sizing得到中间容器的100%宽度的

而双飞翼布局则是通过再中间的容器中，再添加一个子容器，通过设置他的margin来达到中部自适应的目的

具体步骤如下

<div class="container01">
    <div class="center column01">
        <div class="center-child"></div>
    </div>   <!--中间布局再第一个-->
    <div class="left column01"></div>
    <div class="right column01"></div>
</div>

样式如下

<style>
    *{
        margin:0;
        padding: 0;
    }
    .container01{
        width: 100%;
        overflow: hidden;
    }
    .column01{
        float: left;
        height: 200px;
    }
    .left{
        width: 200px;
        margin-left: -100%;
        background-color: #f00;
    }
    .right{
        width: 150px;
        margin-left: -150px;
        background-color: #ff0;
    }
    .center{
        width: 100%;
        background-color: #eee;
    }
    .center-child{
        margin-left:200px;
        margin-right: 150px;
    }
</style>

双飞翼布局就不需要为左边和右边进行定位，相反的是为中间的子容器添加margin使得内容不被遮蔽

相比而言，个人感觉双飞翼布局更加好理解一点

转载于:https://my.oschina.net/u/4085373/blog/3017795