</div>
</div>
<div id="footer">页脚</div>
</body>
</html>
2、固定宽度混合布局
固定宽度的混合布局结构，同固定宽度的三列布局模式相同。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定宽度混合布局</title>
<style>
*{margin:0;padding:0;}
#header{
height:50px;
background:blue;
}
#main{
width:960px;
margin:0 auto;
overflow:hidden;
}
#main .main-left{
width:200px;
height:800px;
background:lightgreen;
float:left;
}
#main .main-right{
width:760px;
height:800px;
float:right;
}
#main .main-right .right-l{
width:560px;
height:800px;
background:yellow;
float:left;
}
#main .main-right .right-r{
width:200px;
height:800px;
background:pink;
float:right;
}
#footer{
width:960px;
height:50px;
background:gray;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">头部</div>
<div id="main">
<div class="main-left">左边</div>
<div class="main-right">
<div class="right-l">右-左</div>
