圣杯布局
<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>
.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;}
1 通过margin-left为负值,将left和right部分顶上去,通过相对定位.
双飞翼布局
body {min-width: 550px;}
.col {float: left;}
#main {width: 100%;height: 400px;background-color: #ccc;}
#main-wrap {margin: 0 190px 0 190px;}
#left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}
#right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}
<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>
相同点:双飞翼布局也是利用margin-left把left和right顶上去;
不同点:双飞翼是在main里加一个子元素,利用margin或者padding把里面的东西定位
