圣杯布局其实和双飞翼布局是一回事。
它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,差别在于其实现的思想。
本质都是利用float后的margin-left负值,形成布局。
1.圣杯布局
html:
<div id="container"> <div id="main" class="col"> #main </div> <div id="left" class="col"> #left </div> <div id="right" class="col"> #right </div> </div>
css:
.col {position: relative;float: left;} #container {padding: 0 190px 0 190px;} #main {width: 100%;height: 400px;background-color: #ccc;} #left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;} #right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}
2.双飞翼布局
<div id="container"> <div id="main" class="col"> <div id="main-wrap"> #main </div> </div> <div id="left" class="col"> #left </div> <div id="right" class="col"> #right </div> </div>
因为装main内容的div宽度是适应变化的,因此不能给它加上width:100%,所以考虑给main多嵌套了一层,使得可以在这层用width:100%,经过margin-left的移动后,不再需要position:relative+left定位的帮助
3.三列等高布局
实现了无论其中一列内容多高,其余2列都会跟着变高。
HTML:
<div id="wrap"> <div id="left"> left </div> <div id="center"> center<br /> center<br /> center<br /> center<br /> center<br /> </div> <div id="right"> right </div> </div>
核心css代码:
#wrap { overflow: hidden; width: 1000px; margin: 0 auto; } #left, #center, #right { margin-bottom: -10000px; padding-bottom: 10000px; }
padding-bottom把每个盒子顶高,然后用负的margin-bottom将其收回来,对于最高的那列这个就刚好抵消了,毫无意义,但是对于较矮的那两列,父元素的可见区还是漏了一些padding出来,漏出来的padding就是它们与最高列之间的高度差了。
所以说这里设置的几列之间最大的高度差不能超过10000px,当然我们可以修改css来增大它。