html-- Flying wing

<! DOCTYPE HTML> 
<HTML> 
    <head> 
        <Meta charset = " UTF-. 8 " > 
        <title> </ title> 
        <-! Compared two groups to achieve:
         1 . The two main types of arrangement patterns are column discharge in the document flow front, the main priority column loading.
        2 . In achieving both layouts have in common, so that all three floats and is formed from the outside through a negative three layouts.
        3 . Layout difference between the two is how the main column of the intermediate treatment position: 
                the holy grail of the parent container layout using the left and right inner margin + two positioned opposite from the column; 
                Flying wing is nested within the primary column a new parent block column using the main left and right margins for readjustment
         -> 
        <style type = " text / CSS " > 
            * { 
                margin: ;
                padding: 0 ; 
            } 
            body { 
                min - width: 600px; 
            } 
            
            
            / * header foot pattern * / 
            # header, footer # { 
                border: 1px Solid; 
                background: Gray; 
                text - align = left: Center; 
            } 
            
            / * three columns pseudo contour layout * / 
            #content .middle, .left # Content, Content # .right { 
                / * padding-bottom: 10000px; 
                margin-bottom: -10000px; * / 
                height: 50px; 
                Line - height: 50px;
                 a float: left;
            }
            
            /*双飞翼布局*/
            #content{
                overflow: hidden;
            }
            #content .middle{
                width: 100%;
                background: deeppink;
            }
            #content .middle .m_inner{
                padding: 0 200px;
            }
            #content .left,#content .right{
                background: pink;
                width: 200px;
                text-align: center;
            }
            #content .left{
                margin-left: -100%;
            }
            #content .right{
                margin-left: -200px;
            }
            
        </style>
    </head>
    <body>
        <div id="header">
            <h4>header</h4>
        </div>
        <div id="content">
            <div class="middle">
                <div class="m_inner">
                    middle
                </div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
        <div id="footer">
            <h4>footer</h4>
        </div>
    </body>
</html>

<- compared two groups of implementation:!
1. The two kinds of layout are listed on the main document flow front, the main priority column loading.
2. both layouts in the realization have in common, it is to make three floating, and then from the formation of three layouts by negative outside.
3. Two different from the layout process is how the position of the middle of the main column:
Holy Grail parent container layout using the left and right inner margin from the two columns relative positioning +;
Flying wing is nested within the primary column a new parent block column using the main left and right margins for readjustment
->

Guess you like