這篇文章將為大家詳細(xì)講解有關(guān)css實(shí)現(xiàn)兩欄布局的方法有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),運(yùn)城企業(yè)網(wǎng)站建設(shè),運(yùn)城品牌網(wǎng)站建設(shè),網(wǎng)站定制,運(yùn)城網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,運(yùn)城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1、浮動(dòng)布局

左側(cè)欄固定寬度向左浮動(dòng)，右側(cè)主要內(nèi)容則用margin-left留出左側(cè)欄的寬度，默認(rèn)寬度為auto，自動(dòng)填滿剩下的寬度。

        .one{
            float: left;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-left: 200px;
            height: 200px;
            background: salmon
        }

右側(cè)固定寬度，左側(cè)自適應(yīng)則是同理，只要將固定欄右浮動(dòng)，使用margin-right空出其寬度即可。

        .one{
            float: right;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-right: 200px;
            height: 200px;
            background: salmon
        }

2、浮動(dòng)布局+負(fù)外邊距（雙飛翼布局的兩欄版）

        .aside{
            width: 300px;
            height: 100px;
            background:darkcyan;
            margin-right: -100%;
            float: left;
        }
        .main{
            width: 100%;
            float: left;
        }
        .content{
            margin-left: 300px;
            background: salmon;
        }

3、絕對(duì)定位

        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            background: darkcyan
        }
        .right{
            height: 200px;
            margin-left:200px; 
            background: salmon;
        }

關(guān)于css實(shí)現(xiàn)兩欄布局的方法有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。