css實現(xiàn)三欄布局的方法是什么？相信有很多人都不太了解，今天小編為了讓大家更加了解css實現(xiàn)三欄布局的方法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。

成都創(chuàng)新互聯(lián)公司成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元衛(wèi)濱做網(wǎng)站,已為上家服務(wù),為衛(wèi)濱各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

實現(xiàn)方法：

一、float浮動

<section class='layout float'>
         <style>
             .layout.float .left-right-center{
                 height: 100px;
             }
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: red;
             }

             .layout.float .right{
                 float: right;
                 width: 300px;
                 background-color: blue;
             }

             .layout.float .center{
                 background-color: yellow;
             }
         </style>
         <article class="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">我是中間的自適應(yīng)元素--浮動</div>
         </article>
     </section>

原理：左右兩個div由于浮動脫離了文檔流，center就會上移，造成三欄布局的效果（前提是高度相同）

優(yōu)點：兼容性高

缺點：需要清除浮動來防止影響其他元素

如果高度不固定，中間的內(nèi)容會被撐開，左右兩邊不會一起撐開

二、絕對定位

<section class="layout absolute">
         <style>
             .layout.absolute .left-center-right div{
                 position: absolute;
                 height: 100px;
             }

             .layout.absolute .left{
                 left: 0;
                 width: 300px;
                 background-color: red;
             }

             .layout.absolute .center{
                 left: 300px;
                 right: 300px;
                 background-color: yellow;
             }

             .layout.absolute .right{
                 right: 0;
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中間的自適應(yīng)元素--絕對定位
            </div>
            <div class="right"></div>
         </article>
     </section>

原理：利用絕對定位以及寬度，將左右兩邊的div固定住，中間div的寬度就會有自適應(yīng)的效果

優(yōu)點：快捷

缺點：如果父元素脫離了文檔流，子元素一定會脫離文檔流，運用的場景不多

如果中間元素的高度增加，兩邊元素的高度不會增加，所以只有中間的div會撐開

三、flex布局

<section class="layout flex">
         <style>
             .layout.flex .left-center-right{
                 display: flex;
                 height: 100px;
             }

             .layout.flex .left{
                 width: 300px;
                 background-color: red;
             }

             .layout.flex .center{
                 flex: 1;
                 background-color: yellow;
             }

             .layout.flex .right{
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中間的自適應(yīng)元素--flex布局
            </div>
            <div class="right"></div>
         </article>
     </section>

原理：將父元素設(shè)置為flex布局，然后中間元素設(shè)置flex為1，達到自適應(yīng)的效果

優(yōu)點：在實際開發(fā)中常用

缺點：IE8及以下的瀏覽器不支持

如果高度不固定，中間內(nèi)容的高度撐開后，兩邊也會隨之撐開

四、table布局

   <section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 100px;
                width: 100%;
            }

            .layout.table .left{
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout.table .center{
                display: table-cell;
                background-color: yellow;
            }

            .layout.table .right{
                display: table-cell;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中間的自適應(yīng)元素--table
            </div>
            <div class="right"></div>
        </article>
    </section>

原理：將父元素設(shè)置為table布局，然后每個子元素都是teble-cell，給左右兩個格子設(shè)置固定的寬度，中間的格子就可以達到自適應(yīng)的效果

優(yōu)點：兼容性好，可做flex布局在ie8以下的代替

缺點：局限性

如果高度不固定，中間被撐開時，左右兩邊也會被撐開，和flex類似

五、網(wǎng)格布局

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;/*每一格都是100px高*/
                grid-template-columns: 300px auto 300px;/*左右兩格都是300px，中間是自適應(yīng)*/
            }
            
            .layout.grid .left{
                background-color: red;
            }

            .layout.grid .center{
                background-color: yellow;
            }

            .layout.grid .right{
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中間的自適應(yīng)元素--grid布局
            </div>
            <div class="right"></div>
        </article>
    </section>

原理：將父元素設(shè)置為網(wǎng)格布局，然后規(guī)定每格的高度以及每格的寬度，只用分別給每格單獨設(shè)置顏色即可

優(yōu)點：技術(shù)比較新，方便

缺點：兼容性不是很好

如果高度不固定，中間元素添加文本，也不會撐開

以上就是css實現(xiàn)三欄布局的方法是什么的簡略介紹，當(dāng)然詳細使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！

網(wǎng)站名稱：css實現(xiàn)三欄布局的方法是什么？
當(dāng)前網(wǎng)址：http://chinadenli.net/article40/jgghho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、Google、App設(shè)計、用戶體驗、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)