首页 > Web开发 > 详细

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

时间:2017-05-24 23:35:26      阅读:255      评论:0      收藏:0      [点我收藏+]

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

什么是双飞翼布局??

    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>

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

原文:http://www.cnblogs.com/jxxx/p/6901413.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!