常見的三列布局（左右固定寬度，中間自適應(yīng)）

實現(xiàn)css中的三列布局萝挤，左右固定寬度御毅，中間自適應(yīng)。三列布局方式的關(guān)鍵是怎么樣才能使得在伸縮瀏覽器窗口的時候讓中間的子元素寬度改變怜珍。比較常見的實現(xiàn)方案是：定位端蛆，浮動，css3中新特性flex布局酥泛，以及流行的圣杯布局今豆，雙飛翼布局。
1柔袁、自身浮動法
思路：對左右分別使用float:left和float:right呆躲，float使左右兩個元素脫離文檔流，中間盒子是正常文檔流捶索。在html結(jié)構(gòu)中插掂，中間的盒子一定要放置在左右盒子的后面。這樣中間的盒子會自動移動到左右盒子下面腥例，并且使用margin指定左右外邊距進行定位辅甥，以便留出左右盒子的寬度，從而使中間元素自適應(yīng)屏幕寬度燎竖。具體實現(xiàn)如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            height: 100%;
        }
        .left,
        .right{
            width: 200px;
            height: 200px;
            background-color: pink;
           
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .center{
            margin: 0 200px;
            min-height: 400px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>       
    </div>
</body>
</html>

2璃弄、絕對定位法：
思路：和浮動法的思路差不多，只不過這里使用絕對定位將使左右盒子脫離文檔流底瓣，并且html結(jié)構(gòu)中盒子放置順序是左谢揪，中，右捐凭。代碼實現(xiàn)如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    
        .container{
            position: relative;
            height: 100%;     
        }
        .left,
        .right{
            position: absolute;
            top: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .center{
            margin: 0 200px;
            background-color: purple;
            min-height: 300px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
        <div class="right">right</div>
    </div>
</body>
</html>

3拨扶、flex布局（推薦）
flex布局實現(xiàn)三列布局有許多思路，這里給出其中一種茁肠。給父容器設(shè)置樣式display：flex患民，justify-content: space-between。具體代碼實現(xiàn)如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            justify-content: space-between;
            height: 100%;
        }
        .left,
        .right{          
            flex: 0 0 200px;  /* 放大的比例  縮小的比例 占父親整個空間的大小 */
            height: 200px;
            background-color: pink;
        }
        .center{
            flex: 1; /*  占父容器剩余空間的一份 */
            background-color: purple;
            min-height: 400px;
        }
    </style>    
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
        <div class="right">right</div>
    </div>
</body>
</html>

4垦梆、圣杯布局
圣杯布局的原理是margin負值法匹颤。為了讓中間盒子內(nèi)容不被遮擋仅孩，設(shè)置父盒子padding：0 200px，使中間盒子左右兩邊空出200px區(qū)域以便放置左右盒子印蓖。并且html結(jié)構(gòu)中盒子放置順序是中辽慕，左，右赦肃，并且全部左浮動溅蛉。然后設(shè)置左盒子的左負外邊距，并加上定位他宛，設(shè)置右盒子右負外邊距船侧。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
        .container{
            padding: 0 200px;
        }
        .center{
            width: 100%;
            background-color:pink;
            min-height: 400px;
            float: left; 
            /* margin: 0 200px;  不能用這種方式留出左右兩邊空白  */
        }
        .left,
        .right{
            background-color:purple;
            width: 200px;
            height: 200px;
            float: left;
        }
        .left{            
            margin-left:-100%;
            position: relative; 
            left: -200px;           
        }
        .right{          
            margin-right: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

5、雙飛翼布局
雙飛翼布局是為了解決圣杯布局的弊端提出的厅各，如果在圣杯布局中將瀏覽器寬度縮短到一定程度的時候镜撩，會使得中間子元素的寬度比左右子元素寬度小的時候，這時候布局就會出現(xiàn)問題队塘。但是雙飛翼布局缺點是：多加了一層dom節(jié)點袁梗。所以這里提示在使用圣杯布局的時候一定要設(shè)置整個容器的最小寬度。
思路類似圣杯布局人灼，但是為了中間div內(nèi)容不被遮擋围段，需在中間div盒子內(nèi)部創(chuàng)建子盒子顾翼，并在該子盒子里用margin-left和margin-right為左右兩欄div留出位置投放。同時，左右兩欄盒子只用到了左負邊距适贸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .center-container{
            width: 100%;
            float: left;
            /* padding: 0 200px;不能用這種方式留出左右兩邊空白 */
        }
        .center{
            margin: 0 200px;
            background-color:pink;
            min-height: 400px;
        }
        .left,
        .right{
            background-color:purple;
            width: 200px;
            height: 200px;
            float: left;
        }
        .left{            
            margin-left: -100%;   
        }
        .right{
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class=".center-container">
        <div class="center">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>      
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

6灸芳、用到css中calc（不推薦）
使用到css3中計算公式，會影響性能拜姿。calc（）的+ 和 - 運算符的兩邊必須要有空白字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            height: 100%;
        }
        .center{
            width: calc(100% - 400px);
            background-color:pink;
            min-height: 400px;
            float: left;            
        }
        .left,
        .right{
            background-color:purple;
            width: 200px;
            height: 200px;
            float: left;   
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>       
        <div class="right">right</div>
    </div>
</body>
</html>

7烙样、grid/table布局
這是兩種特殊的布局，讀者可自行探索蕊肥。

引用小火柴的藍色理想博客中的一段話:
總結(jié)：無論是什么布局方式谒获，無外乎需要應(yīng)用float、inline-block壁却、table批狱、absolute、flex展东、grid這6種布局屬性赔硫，然后再配合負margin、calc()函數(shù)盐肃、bfc爪膊、增加結(jié)構(gòu)等來實現(xiàn)布局权悟。自適應(yīng)包括兩種情況：一種是寬度由內(nèi)容撐開，一種是寬度自動撐滿父元素剩余寬度推盛÷透螅可實現(xiàn)寬度由內(nèi)容撐開的屬性有： float、inline耘成、inline-block拇派、table、table-cell凿跳、absolute件豌、fixed、flex控嗜、grid茧彤。可實現(xiàn)寬度自動撐滿父元素剩余寬度的屬性有： overflow(配合float)疆栏、table曾掂、flex、grid壁顶。