The implementation process of the Holy Grail Layout

The implementation process of the Holy Grail Layout

The holy cup layout and the dual-flying wing layout both require three columns of layout, the middle width is adaptive, and the width is fixed on both sides. The advantage of this is that the important thing is that the rendering can be prioritized before the document stream, the dual-flying wing layout is an improvement to the layout of the holy cup, which will be discussed in the next article.

Holy cup layout: Floating, negative margin, and relative positioning are used without adding additional labels.

DOM structure:

<div class="header">Header</div><div class="bd">    <div class="main">Main</div>    <div class="left">Left</div>    <div class="right">Right    </div></div><div class="footer">Footer</div>

Style:

    <style>        body{padding:0;margin:0}        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}        .bd{            padding-left:150px;            padding-right:190px;        }        .left{            background: #E79F6D;            width:150px;            float:left;            margin-left:-100%;            position: relative;            left:-150px;        }        .main{            background: #D6D6D6;            width:100%;            float:left;        }        .right{            background: #77BBDD;            width:190px;            float:left;            margin-left:-190px;            position:relative;            right:-190px;        }    </style>

 

Style change process in the left, middle, and right

1. The middle part needs to change according to the browser width, so we need to use 100%. Here we set the left center to right to left, because the center 100%, the left layer and the right layer have no position at all.

       .left{            background: #E79F6D;            width:150px;            float:left;        }        .main{            background: #D6D6D6;            width:100%;            float:left;        }        .right{            background: #77BBDD;            width:190px;            float:left;        }

2. After negative margin150 is added to the left layer, it is found that the left layer has gone up, because the negative side has no position in the out window and can only be moved up.

 .left{            background: #E79F6D;            width:150px;            float:left;            margin-left:-150px;        }

3. in step 2, we can see that it can be reached to the leftmost as long as the window width is moved. Use the negative margin to locate the left and right columns.

        .left{            background: #E79F6D;            width:150px;            float:left;            margin-left:-100%;        }        .right{            background: #77BBDD;            width:190px;            float:left;            margin-left:-190px;        }

4. But the problem is that the middle is blocked by the left and right sides, so I have to add padding to the outer layer.

       .bd{            padding-left:150px;            padding-right:190px;        }

5. The left and right columns are indented, so the relative positioning method is used to separate the rows from the left and right columns to obtain the final result.

        .left{            background: #E79F6D;            width:150px;            float:left;            margin-left:-100%;            position: relative;            left:-150px;        }        .right{            background: #77BBDD;            width:190px;            float:left;            margin-left:-190px;            position:relative;            right:-190px;        }

Original