首页 > 代码库 > 双飞翼布局

双飞翼布局

CSS文件:
body{
margin:0;
padding:0;
}
.header {
background:orange;
height:100px;
}
.footer{
background: greenyellow;
height:300px;
}
.article{
background:beige;
overflow: hidden;
}

.article .middle{
float:left;
background: #dbae58;
width:100%;
margin-bottom:-9999px;
padding-bottom:9999px;

}
.article .right{
background: #213aff;
float: left;
width:100px;
margin-left: -100px;
margin-bottom:-9999px;
padding-bottom:9999px;

}
.article .left{
background: green;
float:left;
width:150px;
margin-left: -100%;
margin-bottom:-9999px;
padding-bottom:9999px;
}
.article .inner{
background: #50cd35;
margin-left:150px;
margin-right:100px;
margin-bottom:-9999px;
padding-bottom:9999px;
}

主要是通过给padding-bottom一个较大的正值,margin-bottom一个大小一样的负值,外层容器overflow:hidden;实现登高布局,保证容器内高度大小跟随内容变化



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://www.mamicode.com/src/css/test.css" rel="stylesheet">
</head>
<body>
<div class="header">
header
</div>
<div class="article">
<div class="middle">
<div class="inner">
middle
<br/>
middle
<br/>
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="footer">
tail
</div>
</body>
</html>

双飞翼布局