首页 > Web开发 > 详细

css布局-双飞翼布局

时间:2016-12-23 22:31:40      阅读:137      评论:0      收藏:0      [点我收藏+]

 

<div class="header">Header</div>
<div class="bd">
    <div class="main">
        <div class="inner">
            Main
        </div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>
body{padding:0;margin:0}
.header,.footer{width:100%;background:#666;height:30px;clear:both;}
.left{background:#E79F6D;width:150px;float:left;margin-left:-100%;}
.main{background:#D6D6D6;width:100%;float:left;}
.right{background:#77BBDD;width:190px;float:left;margin-left:-190px;}
.inner{margin-left:150px;margin-right:190px;}

增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是双飞翼布局。

DOM结构:main内层增加了一个div

css布局-双飞翼布局

原文:http://www.cnblogs.com/coldfishdt/p/6216046.html

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