聖盃佈局和雙飛翼佈局

解決的問題

聖盃佈局和雙飛翼佈局解決的問題是同樣的，就是兩邊定寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。

聖盃佈局

聖盃佈局dom結構：

<section class="layout grail">
        <h1>聖盃佈局</h1>
        <article class="left-center-right">
            <div class="center">
                1.這是三欄佈局的聖盃佈局解決方案； 
                2.這是三欄佈局的聖盃佈局解決方案； 
                3.這是三欄佈局的聖盃佈局解決方案； 
                4.這是三欄佈局的聖盃佈局解決方案； 
                5.這是三欄佈局的聖盃佈局解決方案； 
                6.這是三欄佈局的聖盃佈局解決方案； 
                7.這是三欄佈局的聖盃佈局解決方案； 
                8.這是三欄佈局的聖盃佈局解決方案；
                9.這是三欄佈局的聖盃佈局解決方案；
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </article>
    </section>

1.首先讓三個列都向左浮動：

.layout.grail .left-center-right>div {
        float: left;
    }

2.把左右兩個列提到和中間列同行（margin做用的相關解釋：http://www.cnblogs.com/2050/a...）：

.layout.grail .left {
            margin-left: -100%;
        }
        .layout.grail .right {
            margin-left: -300px;
        }

3.上面中間列被遮擋了，這時在這三列的父元素上加padding值（疑問：爲何這裏不用margin呢？試了下效果也能夠的~）：

.layout.grail .left-center-right {
        padding: 0 300px;
    }

4.這時左右兩列也跑上來了，經過絕對定位relative讓它們回到正確的位置：

.layout.grail .left {
        position: relative;
        left: -300px;
    }
    .layout.grail .right {
        position: relative;
        right: -300px;
    }

此時效果已經完成了，只是在窗口變小到限定值時佈局會亂掉，那麼給它加上一個寬度限制：

.layout.grail .left-center-right {
        min-width: 304px;
    }

完整的CSS代碼以下：

<style>
        .layout.grail .left-center-right {
            padding: 0 300px;
            min-width: 304px;
        }
        .layout.grail .left-center-right>div {
            float: left;
            min-height: 100px;
        }
        .layout.grail .center {
            background: yellow;
        }
        .layout.grail .left {
            margin-left: -100%;
            width: 300px;
            background: red;
            position: relative;
            left: -300px;
        }
        .layout.grail .right {
            margin-left: -300px;
            width: 300px;
            background: blue;
            position: relative;
            right: -300px;
        }
    </style>

雙飛翼佈局

雙飛翼dom結構：

<section class="layout ued">
        <h1>雙飛翼佈局</h1>
        <article class="left-center-right">
            <div class="wrap">
                <div class="center">
                    1.這是三欄佈局的雙飛翼佈局解決方案； 
                    2.這是三欄佈局的雙飛翼佈局解決方案； 
                    3.這是三欄佈局的雙飛翼佈局解決方案； 
                    4.這是三欄佈局的雙飛翼佈局解決方案； 
                    5.這是三欄佈局的雙飛翼佈局解決方案； 
                    6.這是三欄佈局的雙飛翼佈局解決方案； 
                    7.這是三欄佈局的雙飛翼佈局解決方案； 
                    8.這是三欄佈局的雙飛翼佈局解決方案；
                    9.這是三欄佈局的雙飛翼佈局解決方案；
                </div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </article>
    </section>

聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄所有float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以造成三欄佈局：

.layout.ued .left-center-right>div {
        float: left;
    }
    .layout.ued .center {
        background: yellow;
    }
    .layout.ued .left {
        margin-left: -100%;
    }
    .layout.ued .right {
        margin-left: -300px;
    }

不一樣在於解決」中間欄div內容不被遮擋「問題的思路不同：聖盃佈局爲了中間div內容不被遮擋，將父容器設置了左右padding-left和padding-right後，將左右兩個div用相對佈局position: relative並分別配合right和left屬性，以便左右兩欄div移動後不遮擋中間div；而雙飛翼佈局爲了中間div內容不被遮擋，直接在中間div內部建立子div用於放置內容，在該子div裏用margin-left和margin-right爲左右兩欄div留出位置。

.layout.ued .wrap {
        margin-left: 300px;
        margin-right: 300px;
    }

完整的CSS代碼：

<style>
        .layout.ued .left-center-right>div {
            float: left;
        }
        .layout.ued .wrap {
            margin-left: 300px;
            margin-right: 300px;
        }
        .layout.ued .center {
            background: yellow;
        }
        .layout.ued .left {
            background: red;
            min-height: 100px;
            width: 300px;
            margin-left: -100%;
        }
        .layout.ued .right {
            background: blue;
            min-height: 100px;
            width: 300px;
            margin-left: -300px;
        }
    </style>

轉載連接：https://www.zhihu.com/questio...