此時(shí)可以得到左右兩欄分布：

接下來(lái)再來(lái)看中間欄如何處理。我們知道對(duì)于float元素，其會(huì)脫離文檔流，其他盒子也會(huì)無(wú)視這個(gè)元素。（但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在周?chē)＃┧源藭r(shí)只需在container容器內(nèi)添加一個(gè)正常的div，其會(huì)無(wú)視left和right，撐滿整個(gè)container，只需再加上margin為left right流出空間即可：

此時(shí)看到的效果是：左、右兩欄被擠到第二行。這是因?yàn)閙ain的寬度為100%。接下來(lái)我們通過(guò)調(diào)整左、右兩欄的margin來(lái)將左、中、右放在一行中：

.left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background-color: yellow;
        }

第二步，將left的margin-left設(shè)置為-100%，此時(shí)左欄會(huì)移動(dòng)到第一行的首部。然后再將right的margin-left設(shè)置為其寬度的負(fù)值：-100px，則右欄也會(huì)移動(dòng)到和左、中欄一行中：

不過(guò)此時(shí)還沒(méi)有大功告成，我們?cè)囍趍ain中加入一些文字：

        
            fjlskdjflkasjdfljasdljlsjdljsdjflksadj
            
            
        
    

可以看到文字被壓住了，接下來(lái)就要解決這個(gè)問(wèn)題。

第三步，給container一個(gè)padding，該padding應(yīng)該正好等于左、右欄的寬度：

.container {
            padding-left: 100px;
            padding-right: 100px;
        }

此時(shí)看到的結(jié)果是左、中、右三欄都整體收縮了，但文字依然被壓住了。

第四步，給左、右兩欄加上相對(duì)布局，然后再通過(guò)設(shè)置left和right值向外移動(dòng)：

.left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }

到此為止，大功告成：

4. 雙飛翼布局

雙飛翼布局的前兩步和圣杯布局一樣，只是處理中間欄部分內(nèi)容被遮擋問(wèn)題的解決方案有所不同：

既然main部分的內(nèi)容會(huì)被遮擋，那么就在main內(nèi)部再加一個(gè)content，通過(guò)設(shè)置其margin來(lái)避開(kāi)遮擋，問(wèn)題也就可以解決了：

唯一需要注意的是，需要在main后面加一個(gè)元素來(lái)清除浮動(dòng)。

5. flex布局

flex布局是趨勢(shì)，利用flex實(shí)現(xiàn)三欄布局也很簡(jiǎn)單，不過(guò)需要注意瀏覽器兼容性：

            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }

            .left {
                height: 200px;
                order: -1;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }

            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        
    
    
        
            fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
            
            
        
    

有幾點(diǎn)需要注意一下：

1. main要首先加載就必須寫(xiě)在第一位，但因?yàn)閘eft需要顯示在最左側(cè)，所以需要設(shè)置left的order為-1

2. flex屬性的完整寫(xiě)法是：flex: flex-grow flex-shrink flex-basis 。這也是flex實(shí)現(xiàn)三欄布局的核心，main設(shè)置flex-grow為1，說(shuō)明多余空間全部給main，而空間不夠時(shí)，僅縮小left right部分，同時(shí)因?yàn)橹付薼eft right部分的flex-basis，所以指定了兩者的寬度，保證其顯示效果

6. 絕對(duì)定位

絕對(duì)定位的方式也比較簡(jiǎn)單，而且可以?xún)?yōu)先加載主體：

            .container {
            }
            .middle {
                position: absolute;
                left: 200px;
                right: 200px;
                height: 300px;
                background-color: yellow;
            }

            .left {
                position: absolute;
                left: 0px;
                width: 200px;
                height: 300px;
                background-color: red;
            }

            .right {
                position: absolute;
                right: 0px;
                width: 200px;
                background-color: green;
                height: 300px;
            }
        
    
    
        
            fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
            
            
        
    

以上是“CSS中經(jīng)典三欄布局方案的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！