關於聖盃佈局和雙飛翼佈局

聖盃佈局
html：

<div id="container">
    <div id="center">center</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>

css:

#container {
            padding: 0 100px 0 200px;/*左寬度為200px 右邊寬度為100px*/
}
.col {
    float: left;
    position: relative;
    height: 300px;
}
#center {
    width: 100%;
    background: #eee;
}
#left {
    width: 200px;
    background: blue;
    margin-left: -100%;
    right: 200px;
}
#right {
    width: 100px;
    background: red;
    margin-right: -100px;
}

效果如圖：

雙飛翼佈局
html：

<div id="container">
    <div id="center" class="col">
        <div class="wrap">center</div>
    </div>
    <div id="left" class="col">left</div>
    <div id="right" class="col">right</div>
</div>

css:

.col {
            float: left;
            height: 300px;
}
#center {
    width: 100%;
    background: #eee;
}
#left {
    width: 200px;
    background: blue;
    margin-left: -100%;
}
#right {
    width: 100px;
    background: red;
    margin-left: -100px;
}
#center .wrap {
    margin: 0 100px 0 200px;
}

效果如圖：

兩種佈局的區別
這兩種佈局實現的都是兩邊固定寬度，中間自適應，中間欄放在最前面優先渲染。
不同的是，雙飛翼佈局多建立一個包裹的div，去掉了相對定位，css相對少寫一些。
個人認為聖盃佈局結構更簡潔，平常工作中就看大家自己的選擇了。