首页 > 代码库 > css布局-双飞翼布局
css布局-双飞翼布局
<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布局-双飞翼布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。