实例
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>0327——双飞翼三列</title>
<style>
.header, .footer{
width: 100%;
height: 100px;
background-color: lightgrey;
}
.doc{
width: 1000px;
height: 100px;
margin: auto;
background-color: grey;
text-align: center;
}
.footer{
clear: both; //清除浮动
}
.con{
width: 1000px;
margin: auto;
overflow: hidden;
}
.war{
width: 100%;
float: left;
}
.war .main{
min-height: 600px;
margin: 0 200px;
background-color: green;
}
.left, .right{
width: 200px;
min-height: 600px;
float: left;
}
.left{
margin-left: -1000px;
background-color: yellow;
}
.right{
margin-left: -200px;
background-color: red;
}
</style>
</head>
<body>
<div class="header">
<div class="doc">头部</div>
</div>
<div class="con">
<div class="war">
<div class="main">中间</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="doc">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
主要是借助浮动和padding来完成，先做中间，在做左边，最后做右边。
