码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-24 23:56:59      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:渲染   例子   优先   bsp   浏览器   box   htm   height   自适应   

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

什么是双飞翼布局??

    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特殊布局--------双飞翼布局

标签:渲染   例子   优先   bsp   浏览器   box   htm   height   自适应   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!