Flying wing css realized, three layout, the width of the intermediate adaptive, fixed width on both sides - five kinds of programs extending Comparative

Flying wing title css achieved, three layout, adaptive intermediate width, on both sides of a fixed width; height assume a fixed 300px;

html

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

CSS
(. 1), the layout of the floating (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), the absolute layout (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 layout

		.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 layout

		.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 layout 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;
         }

extend:

1. Comparative advantages and disadvantages of these five methods?
   a float : disadvantage as a departure from the document stream, the following sub-elements must also flow out of the document, not a control; the advantage of good compatibility;
   Absolute positioning : The disadvantage is that from the document stream, the following sub-elements must also flow out of the document, practical difference; Advantages is quick
   Flex : solve the float, absolute positioning problems, more perfect; but IE8 does not support
   table layout : the disadvantage is criticized handling troublesome history of SEO unfriendly, three columns are highly uniform, along with changes, does not apply to a some scenes; the advantage is to solve the float, the problem of absolute positioning, good compatibility;
   grid : to divide a page into a grid, can be any combination of different grid, make a variety of layouts. Previously, only through complex CSS framework to achieve the effect, the browser now built; Grid layout with Flex layout has some similarities, you can specify the location of the container inside multiple projects. However, they also present significant difference.
   Flex layout is the axis of the layout, you can only specify "project" for the position of the axis, can be seen as unidimensional. Grid layout container sucked into "row" and "column" generation cell, then specify "Project" cells, it can be seen as a two-dimensional layout. Grid layout powerful than the Flex layout
2. Remove assume a fixed height, the height of the highest Yaoan three modules, which method can be applied?
   float, absolute positioning is no longer applicable; table layout, flex arrangement can also be used to change the grid layout grid can be used only