首頁 >web前端 >css教學 >六種CSS經典三欄佈局方案

六種CSS經典三欄佈局方案

小云云
小云云原創
2017-12-04 13:32:5810400瀏覽

css是我們前端開發程式設計師不可或缺的語言,能很好的掌握css能大幅提升前端開發工作,本文主要介紹了CSS經典三欄佈局方案,分享給大家。

三欄佈局,顧名思義就是兩邊固定,中間自適應。三欄佈局在開發十分常見

1. float佈局

#最簡單的三欄佈局就是利用float進行佈局。首先來繪製左、右欄:

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    </style>
      
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

此時可以得到左右兩欄分佈:

 

接下來再來看中間欄如何處理。我們知道對於float元素,其會脫離文檔流,其他盒子也會無視這個元素。 (但其他盒子內的文本依然會為這個元素讓出位置,環繞在周圍。)所以此時只需在container容器內添加一個正常的p,其會無視left和right,撐滿整個container,只需再加上margin為left right流出空間即可:

   <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        margin-left: 120px;
        margin-right: 120px;
      }
    
      .container {
        border: 1px solid black;
      }
    
      <p class="container">
      <p class="left"></p>
      <p class="right"></p>
      <p class="main"></p>
      </p>

##優點:簡單

劣勢:中間部分最後加載,內容較多時影響體驗

2. BFC 規則

BFC(區塊格式化上下文)規則規定:BFC不會和浮動元素重疊。所以如果將main元素設定為BFC元素即可:

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

#3. 聖杯佈局

聖杯佈局的核心是左、中、右三欄都透過float進行浮動,然後透過負值margin進行調整。

第一步,先來看下基本佈局

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }

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

        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
    <body>
        <p class="container">
            <p class="main"></p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

此時看到的效果是:左、右兩欄擠到第二行。這是因為main的寬度為100%。接下來我們透過調整左、右兩欄的margin來將左、中、右放在一行中:

#

        .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設定為-100%,此時左欄會移到第一行的首部。然後再將right的margin-left設定為其寬度的負值:-100px,則右欄也會移到和左、中欄一行中:

 

#不過此時還沒有大功告成,我們試著在main中加入一些文字:

    <body>
        <p class="container">
            <p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

 

#可以看到文字被壓住了,接下來就要解決這個問題。

第三步,給container一個padding,padding應該剛好等於左、右欄的寬度:

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

此時看到的結果是左、中、右三欄都整體收縮了,但文字依然被壓住了。

 

第四步,將左、右兩欄加上相對佈局,然後再透過設定left和right值向外移動:

#

        .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. 雙飛翼佈局

#雙飛翼佈局的前兩步和聖杯佈局一樣,只是處理中間欄部分內容被遮擋問題的解決方案有所不同:

既然main部分的內容會被遮擋,那麼就在main內部再加一個content,透過設定其margin來避開遮擋,問題也就可以解決了:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
        float: left;
        width: 100%;
        }
        .content {
        height: 200px;
        margin-left: 110px;
        margin-right: 220px;
        background-color: green;
        }
        
        .main::after {
        display: block;
        content: &#39;&#39;;
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
        }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        background-color: blue;
    }   
    </style>
</head>
<body>
    <p class="main">
        <p class="content"></p>
    </p>
    <p class="left"></p>
    <p class="right"></p>
</body>
</html>

#唯一需要注意的是,需要在main後面加上一個元素來清除浮動。

5. flex佈局

flex佈局是趨勢,利用flex實現三欄佈局也很簡單,不過需要注意瀏覽器相容性:

#

        <style type="text/css">
            .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;
            }
        </style>
    </head>
    <body>
        <p class="container">
            <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

有幾點要注意一下:

  1. main要先載入就必須寫在第一位,但因為left需要顯示在最左側,所以需要設定left的order為-1

  2. flex屬性的完整寫法是:flex: flex-grow flex-shrink flex-basis 。這也是flex實現三欄佈局的核心,main設定flex-grow為1,說明多餘空間全部給main,而空間不夠時,僅縮小left right部分,同時因為指定了left right部分的flex-basis,所以指定了兩者的寬度,保證其顯示效果

6. 絕對定位

絕對定位的方式也比較簡單,而且可以優先加載主體:

        <style type="text/css">
            .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;
            }
        </style>
    </head>
    <body>
        <p class="container">
            <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

以上內容就收關於六種CSS經典三欄的佈局方案,希望能幫助大家。

相關推薦:

網頁版面的時候先寫HTML還是先寫CSS

在HTML的網頁版面裡div與span有什麼差別

CSS佈局有哪些技巧

#

以上是六種CSS經典三欄佈局方案的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn