CSS Layout Holy Grail Layout & Double Flying Wing Layout_html/css

Home

Web Front-end

HTML Tutorial

CSS Layout Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose

Jun 24, 2016 am 11:45 AM

According to my understanding, in fact, the purpose of realizing the Holy Grail layout and the double flying wing layout is to fix the width of the left and right columns and adapt the middle part.

But there are still some differences in implementation here

[Holy Grail Layout]

Here, the left (200px) and right (220px) widths are fixed, the middle is adaptive, and the container part height remains consistent.

DEMO

A little explanation:

The middle part of the html code must first be placed at the front of the container. Then left, right

1.Add float:left to all three, plus position:relative (because relative positioning will be used later)

2.Middle part width: 100% occupied

3.The middle is full at this time, so you need to pull the left to the far left and use margin-left: -100%

4.At this time, the left is pulled back, but it will cover the left end of the middle content. To pull the middle content out, add padding: 0 220px 0 to the outer container 200px

5.The middle content has been pulled back, but the left has also followed, so to restore it, use relative positioning left:-200px For the same reason, right should also be positioned relatively Restore right:-220px

6.It’s probably adaptive at this point. If you want the container height to be consistent, you can add min-height:130px

to both left, middle and right. However, I found out that there is a problem in IE.. The height of the lower space in IE6/7/8/9 is not the same. Same...

Of course, in order to ensure that the window cannot be reduced too small to display the left and right sides, you can add min-width to the body

Okay, thanks for the code Top:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;&lt;title&gt;圣杯布局&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;    *{margin: 0;padding: 0;}    body{min-width: 700px;}    .header,    .footer{         border: 1px solid #333;        background: #aaa;        text-align: center;    }    .left,    .middle,    .right{         position: relative;        float: left;        min-height: 130px;    }    .container{        padding:0 220px 0 200px;        overflow: hidden;    }    .left{        margin-left: -100%;        left: -200px;        width: 200px;        background: red;    }    .right{        margin-left: -220px;        right: -220px;        width: 220px;        background: green;    }    .middle{         width: 100%;        background: blue;        word-break: break-all;    }    .footer{         clear: both;    }&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;header&quot;&gt;    &lt;h4&gt;header&lt;/h4&gt;&lt;/div&gt;&lt;div class=&quot;container&quot;&gt;    &lt;div class=&quot;middle&quot;&gt;        &lt;h4&gt;middle&lt;/h4&gt;        &lt;p&gt;HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        &lt;/p&gt;    &lt;/div&gt;    &lt;div class=&quot;left&quot;&gt;    &lt;h4&gt;left&lt;/h4&gt;        &lt;p&gt;oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000&lt;/p&gt;    &lt;/div&gt;    &lt;div class=&quot;right&quot;&gt;    &lt;h4&gt;right&lt;/h4&gt;        &lt;p&gt;BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888&lt;/p&gt;    &lt;/div&gt;    &lt;/div&gt;    &lt;div class=&quot;footer&quot;&gt;        &lt;h4&gt;footer&lt;/h4&gt;    &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

Copy after login

[Double flying wing layout]

DEMO

I heard that the double-flying wing layout was proposed by Uncle Yu and started with Taobao UED

If you combine three The column layout is compared to a big bird. You can think of main as the body of the bird, and sub and extra as the wings of the bird. The idea of implementing this layout is to first place the most important body parts, and then move the wings to the appropriate place.

In fact, it is similar to the Holy Grail layout above. Of course, you can also change it (if you want) Think about the difference)

Well, there is a bird here~

The sub of the left wing is 200px, and the right wing is extra..220px.. The main adaptation of the body is unknown.

1.In the html code, main should be placed at the front, sub extra

2.Main sub extra should be float:left

3.Fill the main with width: 100%

4.At this time, the main is full, so you need to pull the sub to the far left. Use margin-left:-100% Similarly, use margin-left:-220px for extra

(You can directly continue the steps of the holy grail layout above, or you can make changes)

5.The main content has been covered. In addition to using peripheral padding, you can also consider using margin.

Add an inner div to main-- main-inner, and then margin: 0 220px 0 200px

6.main displays the

code correctly Sincerely:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;&lt;title&gt;双飞翼布局&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;    *{margin: 0;padding: 0;}    body{min-width: 700px;}    .header,    .footer{         border: 1px solid #333;        background: #aaa;        text-align: center;    }    .sub,    .main,    .extra{         float: left;        min-height: 130px;    }    .sub{        margin-left: -100%;        width: 200px;        background: red;    }    .extra{        margin-left: -220px;        width: 220px;        background: blue;    }    .main{         width: 100%;    }    .main-inner{         margin-left: 200px;        margin-right: 220px;        min-height: 130px;        background: green;        word-break: break-all;    }    .footer{         clear: both;    }&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;header&quot;&gt;    &lt;h4&gt;header&lt;/h4&gt;&lt;/div&gt;    &lt;div class=&quot;main&quot;&gt;    &lt;div class=&quot;main-inner&quot;&gt;        &lt;h4&gt;main&lt;/h4&gt;        &lt;p&gt;HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        HHHHHHHHHHHHHHHHHHHHHH        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh        &lt;/p&gt;        &lt;/div&gt;    &lt;/div&gt;     &lt;div class=&quot;sub&quot;&gt;    &lt;h4&gt;sub&lt;/h4&gt;        &lt;p&gt;oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000&lt;/p&gt;    &lt;/div&gt;      &lt;div class=&quot;extra&quot;&gt;    &lt;h4&gt;extra&lt;/h4&gt;        &lt;p&gt;BBBBBBBBBBBBBB        888888888888888888        BBBBBBBBBBBBBBBBBB        88888888888888888888&lt;/p&gt;    &lt;/div&gt;    &lt;div class=&quot;footer&quot;&gt;        &lt;h4&gt;footer&lt;/h4&gt;    &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn