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

css布局-双飞翼布局

时间:2016-12-23 22:32:38      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:ade   back   css布局   code   dom   span   结构   相对布局   blog   

 

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

标签:ade   back   css布局   code   dom   span   结构   相对布局   blog   

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

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