圣杯布局简单解释
上面两张图就是同一个布局在不同浏览器窗口下打开的效果,可以看见中间宽度随着浏览器宽度变化,左右两边是固定的,但是没有高度相等的效果。
下面是代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0}
body{min-width: 700px;color:#fff}
.header,.footer{background:#333;text-align: center;border:1px solid red;width:100%;clear:both;}
.content{padding:0 250px 0 200px;}
.middle,.left,.right{position:relative;float:left}
.middle{width:100%;background: #FF8286}
.left{margin-left:-100%;left:-200px;width:200px;background:blue}
.right{margin-left:-250px;right:-250px;background:green;width:250px;}
</style>
</head>
<body>
<div class="header">
header
</div>
<div class="content">
<div class="middle">
<p>0000000000000000000000000</p>
<p>0000000000000000000000000</p>
<p>0000000000000000000000000</p>
<p>0000000000000000000000000</p>
</div>
<div class="left">
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
<p>1111111111111111111111</p>
</div>
<div class="right">
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
<p>2222222222222222222</p>
</div>
</div>
<div class="footer">
fotter
</div>
</body>
</html>
将left middle right 放在一个DIV中,然后 middle放在最前面,这是最重要的,然后对于left与right 通过margin-left:100%;然后在通过定位,将他们的位置变换回来,而后就会出现这个效果.
通过一切你们会发现对于middle left right 是需要定位position:relative;float:eft;