实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.header {
height: 60px;
background-color: #888888;
}
.container {
width: 1000px;
/*设置主体的宽度*/
margin: 5px auto;
/*跟上下保持间距*/
background-color: lightgray;
overflow: hidden; /*重点操作，这里必须清除子元素的浮动效果*/
}
.wrap {
/*给main加个套子来操作，更加方便*/
width: inherit;
min-height: 800px;
/*高度宽度都继承主体的设置*/
background-color: cyan;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightcoral;
margin-left: -100%; /* 关键操作，浮动后必须用margin拉回它应该在的位置 -100%就是反反向拉整个宽度回去*/
}
/* 右边栏样式 */
.right {
width: 200px;
min-height: 800px;
background-color: lightseagreen;
margin-left:-200px; /* 关键操作，浮动后必须用margin拉回它应该在的位置 -200px就是反方向拉到最右边的位置*/
}
.wrap, .left, .right {
float: left; /* 浮动必须，否则在文档流中不能按自己需求排版 这里注意是浮动 .wrap 不是.main*/
}
.main {
/*这里的两边padding是给主体内容去挤出位置来，因为中间没有设置宽度*/
padding-left: 200px;
padding-right: 200px;
}
.footer {
height: 60px;
background-color: #888888;
}
</style>
<!--<link rel="stylesheet" href="css/style8.css">-->
<title>双飞翼布局实战</title>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="wrap">
<div class="main">主题内容区</div>
</div>
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
<div class="footer"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
