经常有需求,所以就总结一下,有需要的时候直接复制粘贴啦…
布局的原理是margin负值法。首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合,具体原理参考这里。这里对圣杯布局解释特别详细。
html:
<div id = "wrap">
<div id = "center"></div>
</div>
<div id = "left_margin"></div>
<div id = "right_margin"></div>
css:
/*第1种写法*/
#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left_margin {margin-left: -100%; background-color: lightpink}
#right_margin{margin-left: -200px;}
/*第2种写法*/
*{padding: 0;margin:0;}
#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left_margin,#right_margin{top:0; position: absolute; width: 200px;height: 100px;background-color:#333}
#left_margin{left:0;}
#right_margin{right:0;}
#left_margin {background-color: lightpink}
该方法在网站布局中非常常见,优点是三栏相互关联,有一定的抗性。需要注意的是,布局中间部分一定要放在前面,左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。