左側(cè)

CSS

#container {
    position: relative;
}
.left, .right{
    position: absolute;
    top: 0;
    width: 200px;
    min-height: 500px;
    background-color: red;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.center {
    margin: 0px 210px;
    min-height: 500px;
    background-color: yellow;
}

2、利用浮動(dòng)和margin

此方法的原理說(shuō)將左右兩側(cè)進(jìn)行float 浮動(dòng)讓其脫離文檔流，中心部分處于正常文檔流，再為其設(shè)置margin值

此方法一定要將center中間部分放到最后，當(dāng)窗口特別小時(shí)右側(cè)會(huì)被擠下來(lái)

HTML

    左側(cè)
    右側(cè)
    中間

CSS

#container {
    position: relative;
}
.left, .right {
    width: 200px;
    min-height: 500px;
    background-color: red;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    min-height: 500px;
    margin: 0px 210px;
    background-color: yellow;
}

3、圣杯布局

此方法最常見(jiàn)，三者相互關(guān)聯(lián)，最穩(wěn)健。

首先需要將中間部分放再最前面，外面用一層容器包裹。外層容器讓其占滿整個(gè)屏幕100%， 左中右三者都float: left。 將center左右margin設(shè)置為兩邊容器的寬度加上邊距，將left左側(cè)margin-left設(shè)置為-100%,讓其出現(xiàn)在最左側(cè)，將right右側(cè)margin-right設(shè)置為-200px，讓其出現(xiàn)在最右側(cè)。

HTML

    
        中間
    
    左側(cè)
    右側(cè)

CSS

#container {
    position: relative;
}
.center_wrap, .left, .right{
    float: left;
    min-height: 500px;
}
.center_wrap {
    width: 100%;
}
.center_wrap .center{
    min-height: 500px;
    margin: 0px 210px;
    background-color: yellow;
}
.left, .right {
    width: 200px;
    background-color: red;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

4、CSS3 flex

HTML

    左側(cè)
    中間
    右側(cè)

CSS

#container {
    width: 100%;
    display: flex;
}
.left, .right {
    width: 200px;
    background-color: red;
    min-height: 500px;
}
.center {
    flex: 1;
    min-height: 500px;
    margin: 0 10px;
    background-color: yellow;
}

以上是“css如何實(shí)現(xiàn)兩欄固定中間自適應(yīng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

<strike id="4kywk"></strike>