Css Adaptive Layout: "The holy tree Flying Wings" and css adaptive holy tree Flying Wings

Css Adaptive Layout: "The holy tree Flying Wings" and css adaptive holy tree Flying Wings

First of all, I don't know who the name is. That is to say, the content in the middle is adaptive to the width of the browser, the content on both sides is fixed in width.

Come on. The previous Code demonstrates:

　　

1 <style> 2*{3 margin: 0; 4 padding: 0; 5} 6. wrap {7 background-color: # FBD570; 8 overflow: hidden; 9} 10. left {11 float: left; 12 width: 100px; 13 background: # 00f; 14 height: 180px; 15} 16. right {17 float: right; 18 width: 150px; 19 background: #0f0; 20 height: 200px; 21} 22. center {23 background: # B373DA; 24 height: 150px; 25 margin-left: 100px; 26 margin-right: 150px; 27} 28 </style> 29 
The result is as follows:
　　
The middle part of this bulk can indeed change as the browser window width changes:
　　
However, the slot is amazing ?! What is the middle main cross over the content on both sides? What we expect is to put them on a horizontal line. Change the Code as follows:
　　
1 <style> 2*{3 margin: 0; 4 padding: 0; 5} 6. wrap {7 background-color: # FBD570; 8 padding: 0 150px 0 100px; 9 overflow: hidden; 10} 11. left {12 float: left; 13 width: 100px; 14 background: # 00f; 15 height: 180px; 16 margin-left:-100%; 17 position: relative; 18 left: -100px; 19} 20. right {21 float: right; 22 width: 150px; 23 background: #0f0; 24 height: 200px; 25 margin-left:-150px; 26 position: relative; 27 right:-150px; 28} 29. center {30 background: # B373DA; 31 height: 150px; 32 float: left; 33 width: 100%; 34} 35 </style> 36 
The idea is as follows:. To let the box on the left go up, you need to set the width of the center box with the left margin as negative, that is.left {margin-left:-100%;}. In this way, the Left box can be moved to the left. Let the box on the right go up
You need to set the left margin to the negative width, that is.right {margin-left：-150px;}. In this way, the right box can display itself on the far right of a row.
　　
Did you think it was done? Actually, this is not because the words "center, yes" in the middle body are blocked. That is to say, the new two so-called "Flying Wings" block the content of the subject. So we need to move these two broken wings out, but we can't move them out of the screen, because we can't see them anymore.
Therefore, we perform the following operations to use the parent element to set the Left and Right padding values and squeeze the three child boxes of the parent class into the middle. That is,. wrap {padding: 0 150px 0 100px ;}. In this way, a little space is provided for the two small wings.
　　
Finally, extract the left and right small broken wings, that is
　　
.left{ position: relative; left: -100px;}.right{position: relative;right: -150px;}
　　
In this way, the layout of the double flying cup is complete.
Finally, the name is really too pretentious and a little unbearable. I don't know who came up with it.