双飞翼布局实例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<style>
#center_div,#left_div,#right_div{
text-align: center;
}
.column{
float: left;
}
#container{
width: 100%;
}
#center_div{
width: 100%;
background-color: blue;
}
#left_div{
width: 300px;
margin-left: -100%;
background-color: green;
}
#right_div{
width: 200px;
margin-left: -200px;
background-color: yellow;
}
#center_div #mainWrap{
margin-left: 300px;
margin-right: 200px;
}
</style>
<title>双飞翼</title>
</head>
<body>
<divid="container">
<div id="center_div"class="column">
<div id="mainWrap">主要内容</div></div>
<div id="left_div"class="column">左边的div</div>
<div id="right_div"class="column">右边的div</div>
</div>
</body>
</html>
