双飞翼布局:
两边的盒子宽度固定,中间盒子自适应(三列布局)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>双飞翼布局</title>
<style>
*{padding: 0;margin: 0;}
html,body{width:100%;height:100%;}
#wrap{
width: 100%;
height: auto;
min-height: 100%;
}
#header{
width: 100%;
height: 30px;
background: grey;
}
.container{
width: 100%;
padding-bottom: 30px;
}
/*父元素添加伪元素样式清除浮动,处理float的子元素无法撑开父元素高度问题*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.middle{
width: 100%;
height: auto;
float:left;
box-sizing: border-box;
padding: 0 200px;
background-color: deeppink;
}
.left{
width: 200px;
height: 200px;
float:left;
margin-left:-100%;
background-color: blue;
}
.right{
width: 200px;
height: 200px;
float:left;
margin-left:-200px;
background-color: darkorchid;
}
#footer{
position: relative;
width: 100%;
height: 30px;
margin-top: -30px;
background: grey;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">头部信息</div>
<div class="container clearfixr">
<div class="middle"><h4>中间弹性区</h4></div>
<div class="left"><h4>左边栏</h4></div>
<div class="right"><h4>右边栏</h4></div>
</div>
</div>
<div id="footer">底部信息</div>
</body>
</html>