转载自 www.cnblogs.com/LCH-M/p/933…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>双飞翼或圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
}
#continate{
font:18px/30px "微软雅黑"; /*第一个是字体大小 第二 是字体行高 第三 字体**/
}
/**全局定义三个div高度*/
#conter,#left,#right{
height: 300px;
float: left;
}
#conter{
background: sandybrown;
width: 100%;
}
#left{
background: lightblue;
width: 30%;
margin-left: -100%; /*往上100%就是回到最开始哪里*/
}
#right{
background: cyan;
width: 20%;
margin-left: -20%;/*往上100%就是回到最开始哪里*/
}
header,footer{
height: 100px;
line-height: 100px;
text-align: center;
background: salmon;
clear: both;/*清除浮动，要不然里面的div无法进入 因为里面没有指定height*/
}
#yingca{
padding: 0 20% 0 30%;/*去掉左右的距离，把隐藏的内容显示出来**/
}
/*
示例中增加一个#yingca的目的是因为当left上移时与center重叠了，
left覆盖了center，通过yingca的padding将left占用的位置空出。
* */
</style>
</head>
<body>
<header>one</header>
<div id="continate">
<div id="one">
<div id="conter">
<div id="yingca">
conter
</div>
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
<footer>footer</footer>
</body>
</html>
