实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.header, .footer {
background-color: lightpink;
width: 100%;
height: 60px;
}
.header_content, .footer_content {
width: 1000px;
margin: 0 auto;
line-height: 60px;
text-align: center;
}
.content_main {
width: 1000px;
min-height: 600px;
margin: 10px auto;
overflow: hidden;
}
.main {
width: 100%;
float: left;
}
.left {
width: 200px;
min-height: 600px;
float: left;
background-color: blue;
margin-left: -100%;
text-align: center;
line-height: 600px;
}
.right {
width: 200px;
min-height: 600px;
float: left;
background-color: yellow;
margin-left: -200px;
text-align: center;
line-height: 600px;
}
.content {
margin: 0 210px;
min-height: 600px;
background-color: lightblue;
text-align: center;
line-height: 600px;
}
</style>
</head>
<body>
<div class="header">
<div class="header_content">头部内容</div>
</div>
<div class="content_main">
<div class="main">
<div class="content">主体内容</div>
</div>
<div class="left">左边栏</div>
<div class="right">左边栏</div>
</div>
<div class="footer">
<div class="footer_content">底部内容</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
1、对于双飞翼还是有一点迷惑，主要就是浮动之后，定位这块不很多不明白的地方。
2、在浮动之后，为什么要用margin-left这个CSS来控制，这个不是外边距的的控制吗，有点不明白。
