相同
1.圣杯和双飞翼都满足3列中列自适应的布局
2.低于最小宽度都会布局错乱
不同
1.圣杯是用容器包裹三列,双飞翼是3列分开布局
2.圣杯使用position防遮挡,双飞翼css相对简洁只需使用负边距定位即可
圣杯html
<div id="container">
<div id="center" class="column">1111</div>
<div id="left" class="column">222</div>
<div id="right" class="column">333</div>
</div>
圣杯css
body {min-width: 550px;}
#container {padding-left: 200px;padding-right: 150px;}
#container .column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 200px; right: 200px;margin-left: -100%;}
#right {width: 150px;margin-right: -150px;}
双飞翼html
<div id="container" class="column">
<div id="center">1111</div>
</div>
<div id="left" class="column">222</div>
<div id="right" class="column">333</div>
双飞翼css
body {min-width: 500px;}
#container {width: 100%;}
.column {float: left;}
#center {margin-left: 200px;margin-right: 150px;}
#left {width: 200px; margin-left: -100%}
#right {width: 150px; margin-left: -150px;}