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

Source: Internet
Author: User

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.

  

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.