简版双飞翼

双飞翼的布局主要优点是：优先显示中间部分，优先加载主要部分。

 

简版双飞翼布局虽然也可以实现双飞翼布局的样式，但并不具有优先加载中间部分的特点；简版双飞翼的优点就是比较容易理解，容易看懂，容易记忆，以及容易布局，需要用双飞翼时，若实在无法搞定原版的双飞翼布局，可以拿简版来代替。（建议尽量还是用原版的双飞翼布局，此布局仅做补充，替代）

 

简版双飞翼HTML:

  <div class="warp">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="centent">centent</div>
</div>

简版双飞翼CSS:

.warp{
                width: 70%;
                height: 500px;
                margin: 0 auto;
            }
            .left{
                float: left;
                width: 200px;
                height: 500px;
                background: cadetblue;
            }
            .right{
                float: right;
                width: 200px;
                height: 500px;
                background: cadetblue;
            }
            .centent{
                height: 500px;
                background: cornflowerblue;
                margin:0 210px;
            }

最终效果：

 

注：仅做参考，属性，属性值可灵活运用。