A, Flying wing

　　Classic three-column layout, also known as the Holy Grail layout [Holy Grail of Layouts] is a layout of the conceptual model Kevin Cornell proposed in 2006, was first spread by Taobao UED engineers in the country apart, in China there it is called Flying wing its layout requires that:

1, three layout, adaptive intermediate width, on both sides of a fixed width;
2, the middle column shows priority renderer in the browser;
3, the maximum height allowed any column;
4, requires only one additional DIV tag;
5, requirements with the most simple CSS, minimal HACK statement;

　　In the case of no additional label layout has been the holy grail of perfect, the holy grail layout using relative positioning, after layout has limitations, and where the width of the control to be changed, too. In Taobao UED under Discussion (User Experience Design), increase the number of a relative layout div you can not, just floating and uses negative margins, and this is what we call the Flying wing, the code is implemented as follows:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>双飞翼</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body,
            html {
                height: 100%;
                font: 20px/40px "microsoft yahei";
                color: white;
            }
            
            #container {
                width: 90%;
                margin: 0 auto;
                height: 100%;
            }
            
            #header,
            #footer {
                height: 12.5%;
                background: deepskyblue;
            }
            
            #main {
                height: 75%;
            }
            
            #center,
            #left,
            #right {
                height: 100%;
                float: left;
            }
            
            #center {
                width: 100%;
                background: lightgreen;
            }
            
            #right {
                background: lightblue;
                width: 20%;
                margin-left: -20%;
            }
            
            #left {
                background: lightcoral;
                width: 20%;
                margin-left: -100%;
            }
            
            #main-inner {
                padding-left: 20%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                header
            </div>
            <div id="main">
                <div id="center">
                    <div id="main-inner">
                        center
                    </div>
                </div>
                <div id="left">
                    left
                </div>
                <div id="right">
                    right
                </div>
            </div>
            <div id="footer">
                footer
            </div>
        </div>
    </body>
</html>

　　result:

css (IV) Flying wing

A, Flying wing

Guess you like