三欄佈局-左右寬固定,中間自適應

經常使用方式羅列

• float
• absolute
• table
• flex
• grid

float

<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>

.container {
    overflow: auto;  
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
}
.right {
    width: 200px;
    float: right;
    background-color: #2ECC71;
}
.center {
    margin-left: 200px;
    margin-right: 200px;
    background-color: #3498DB;
}

上面實現方式優勢,實現簡單兼容性好

缺點：根據渲染的規則,從上到下,也就是說left和right會優先渲染, center部分會最後渲染.

優化方式-1

利用負margin來完成

<div class="container">
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container {
    overflow: auto;  
}
.left,
.right,
.center {
    box-sizing: border-box;
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
    margin-left: -100%;
}
.right {
    width: 200px;
    float: right;  // float:left;
    background-color: #2ECC71;
    margin-left: -200px;
}
.center {
    float: left;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
    background-color: #3498DB;

}

完成前面主要內容優先加載問題,可是又有新問題,當主體內容過長的時,發現背景(邊框、背景圖等等)影響到了兩側

若是隻處理背景問題能夠使用下面方式

.center {
        background-clip:  content-box
    }

若是有邊框、背景圖片等顯然上面不能知足。

優化方式二 (聖盃佈局)

<div class="container">
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container {
    margin:0 200px;
    position: relative;
}
.left,
.right,
.center {
    box-sizing: border-box;
}

.center {
    float: left;
    width: 100%;
    background-color: #3498DB;
}
.left {
    position: relative;
    left:-200px;
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: #1ABC9C;
}

.right {
    position: relative;
    right:-200px;
    float: right;
    width: 200px;
    margin-left: -200px;
    background-color: #2ECC71;
}

優化方式三: (雙飛翼佈局) 給 center 元素包裹一個容器

<div class="container">
        <div class="center-warpper">
            <div class="center">
                <p>center</p>
                <p>center</p>
                <p>center</p>
                <p>center</p>
                <p>center</p>
                <p>center</p>
                <p>center</p>
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

.container {
    overflow: auto;
}

.left,
.right,
.center,
.center-warpper {
    box-sizing: border-box;
}
.center-warpper {
    float:left;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
}
.center {
    width: 100%;
    overflow: auto;
    background-color: #3498DB;
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
    margin-left: -100%;
}

.right {
    width: 200px;
    float: right;
    background-color: #2ECC71;
    margin-left: -200px;
}

處理方式二和三解決方式很是相似,只是處理的細節不同. 具體用那個均可以通常推薦用前者

absolute

<div class="container">
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container {
    position: relative;
}

.left,
.right,
.center {
    box-sizing: border-box;
}
.center {
    position: absolute;
    left: 200px;
    right: 200px;
    background-color: #3498DB;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: #1ABC9C;
}
.right {
    position: absolute;
    right: 0;
    float: right;
    width: 200px;
    background-color: #2ECC71;
}

table

<div class="container">
        <div class="left">left</div>
        <div class="center">
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>
        </div>
        <div class="right">right</div>
    </div>

.container {
    position: relative;
    display: table;
    width: 100%;
}

.left,
.right,
.center {
    box-sizing: border-box;
    display: table-cell;
}
.center {
    background-color: #3498DB;
}
.left {
    width: 200px;
    background-color: #1ABC9C;
}

.right {
    width: 200px;
    background-color: #2ECC71;
}

flex

<div class="container">
    <div class="left">left</div>
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="right">right</div>
</div>

.container {
    position: relative;
    display: flex;
    width: 100%;
}

.left,
.right,
.center {
    box-sizing: border-box;
    display: table-cell;
}

.center {
    background-color: #3498DB;
    flex:1;
}

.left {
    width: 200px;
    background-color: #1ABC9C;
}

.right {
    width: 200px;
    background-color: #2ECC71;
}

Grid

<div class="container">
    <div class="left">left</div>
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="right">right</div>
</div>

.container {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 200px auto 200px;
}

.left,
.right,
.center {
    box-sizing: border-box;
}

.center {
    background-color: #3498DB;
}

.left {
    background-color: #1ABC9C;
}

.right {
    background-color: #2ECC71;
}

上面就是實現的幾種方式, 細心同窗應該能夠看到 float、absoulut 這兩種方式左右兩列並不會隨着中間內容區域高度變化而變化。

若是想要建立三列布局中間自適應，且三列都等高的話選擇 table、flex、Grid;

具體兼容可查閱 兼容性查看

若是有更好的方式，你們能夠在評論區給出; 一塊兒討論學習