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

今天看到之前写的一篇布局的例子分享给你们,双飞翼布局。浏览器

什么是双飞翼布局??

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

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

双飞翼布局的原理:

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

如下是例子:

   <div class="box"/>
         <div class="main">
                  <div class="main_box">我是主例</div>
         </div>
            <div class=“child_box">我是主例</div>
             <div class="col_box">我是附加例</div>
    </div>
相关文章
相关标签/搜索