圣杯布局和双飞翼布局的理解和区别（附源码）_圣杯布局和双飞翼布局区别-CSDN博客

本文链接：https://blog.csdn.net/qq_36335456/article/details/98205215

相同

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;}