HTML特殊布局--------双飞翼布局

今天看到以前写的一篇布局的例子分享给大家,双飞翼布局。

什么是双飞翼布局??

    1.三列布局,中间宽度自适应,两边固定宽度;

    2.中间栏在浏览器中优先展示渲染;

双飞翼布局的原理:

    中间的盒子定100%的宽 float:left; 两边的盒子都float:left,定固定的宽;左边的个盒子margin-left:-100%; 右边的盒子margin-left:-自身的宽;

以下是例子:

   <div class="box"/>
         <div class="main">
                  <div class="main_box">我是主例</div>
         </div>
            <div class=“child_box">我是主例</div>
             <div class="col_box">我是附加例</div>
    </div>
posted @ 2017-05-24 22:44  静心修仙  阅读(350)  评论(0编辑  收藏  举报