css實現雙飛翼佈局，三列布局，中間寬度自適應，兩邊定寬--五種方案對比延伸

標題css實現雙飛翼佈局，三列布局，中間寬度自適應，兩邊定寬；假設高度固定300px;

html

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

css
(1)、浮動佈局（float）

	.container {
      width: 100%;
      height: 300px;
    }
    .container > div {
        float: left;
    }
    .left, .right {
        width: 60px;
        height: 100%;
    }
    .left {
        background-color:red;
    }
    .right {
        background-color:blue;
    }
    .main {
        height: 100%;
        width:calc(100% - 120px);
        background-color:green;
    }

(2)、絕對佈局（absolute）

		 .container{
            width:100%;
            height:300px;
            position:relative;
         }
        .container > div{
            position:absolute;
            height:100%;
         }
         
        .left,.right{
           width:100px;
         }
        .left{
            left:0;
            background-color:green;
         }
        .right{
            right:0;
            background-color:blue;
         }
        .main{
           	right:100px;
            left:100px;
            background-color:red;
         }

(3)、flex佈局

		.container{
            width:100%;
            height:300px;
            display:flex;
         }
        .container > div{
        	 flex:1;
            height:100%;
         }
         
        .left,.right{
           width:60px;
         }
        .left{
            background-color:green;
         }
        .right{
            background-color:blue;
         }
        .main{
            background-color:red;
         }

(4)table佈局

		.container{
            width:100%;
            height:300px;
            display:table;
         }
        .container > div{
            height:100%;
            display:table-cell;
         }
         
        .left,.right{
           width:60px;
         }
        .left{
            background-color:green;
         }
        .right{
            background-color:blue;
         }
        .main{
            background-color:red;
         }

(5) grid網格佈局

		.container{
            width:100%;
            display:grid;
            grid-template-rows:300px;//行高
            grid-template-columns:100px auto 100px; //列高 幾列設置幾列的寬度
         }
 
        .left{
            background-color:green;
         }
        .right{
            background-color:blue;
         }
        .main{
            background-color:red;
         }

延伸：

1. 對比這五種方法的優缺點？
   float:缺點是脫離文檔流，下面的子元素也必須脫離文檔流，不好控制；優點兼容性好；
   絕對定位：缺點是脫離文檔流，下面的子元素也必須脫離文檔流，實用性差；優點是快捷
   flex:解決float,絕對定位的問題,比較完美的；但是IE8不支持
   table佈局：缺點是歷史詬病操控麻煩，對SEO不友好，三欄高度是統一的，跟着變動的，不適用於某些場景；優點是解決float,絕對定位的問題，兼容性好；
   grid:將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的佈局。以前，只能通過複雜的 CSS 框架達到的效果，現在瀏覽器內置了;Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。
   Flex 佈局是軸線佈局，只能指定"項目"針對軸線的位置，可以看作是一維佈局。Grid 佈局則是將容器劃分成"行"和"列"，產生單元格，然後指定"項目所在"的單元格，可以看作是二維佈局。Grid 佈局遠比 Flex 佈局強大
2. 假設固定高度去掉，高度要按三個模塊中最高的，哪個方法可以適用？
   float 、絕對定位不再適用；table佈局、 flex佈局還可以用 網格佈局grid需要改變纔可以用