1. The role

Both functions are identical in order to achieve a three-column layout with two sides fixed and adaptive in the middle

2. The difference between the Grail layout and the Twin wing layout

Holy Grail layout: In order to prevent the contents of the middle div from being blocked, set the left and right padding-left and the right padding-right div to position: Relative is combined with the right and left attributes, respectively, so that the left and right columns of divs are moved without overshadowing the middle div

Double wing layout: In order to make the middle div content is not blocked, create a child div directly inside the middle div to place the content, and use margin-left and margin-right to leave space for the left and right columns of the div. The twin wing layout takes the positioning optimization out of it.

3. Advantages and disadvantages of the Grail layout versus the twin wing layout

Advantages: No DOM nodes are required

Cons: Normally there is no problem, but special cases will reveal the downside of this scheme, if the browser zooms in, the Holy grail will be broken. Layout confusion occurs when the width of the center section is smaller than that of the right section. (Center

4. Pros and cons of the twin wing layout versus the Grail layout

Advantages: Does not distort like the magic cup layout

Disadvantages: An extra layer of DOM nodes

5. Holy Grail layout code

Implementation steps:

  1. The three containers are set to float so that they are arranged in a row
  2. Add padding to the parent element, and the padding is the left and right box
  3. Move left and right where it should go, left in front of center,right behind Center

Skill margin negative movement

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width.initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .center..left..right {
        float: left;
        height: 200px;
    }

    .center {
        background: red;
        width: 100%; // Can be adaptive key}.left {
        width: 200px;
        background: green;
        margin-left: -100%;
        position: relative;
        left: -200px;

    }

    .right {
        background: hotpink;
        width: 150px;
        margin-right: -100%;
       
    }

    .father {
        padding-left: 200px;
        padding-right: 150px;
    }

 
</style>

<body>
    <div class="father">
        <div class="center"></div>
        <div class="left"> < /div>
        <div class="right"> < /div>
    </div>
</body>

</html>
Copy the code

Grail layout weakness: Distortion when center<right width

6. Realization of double flying wing layout

Implementation steps

  1. Set 100% for the parent element of Center and float for the three horizontal elements inside father
  2. Set margin-left margin-right to center to make left and right
  3. Left and right are implemented with margin negative values
<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width.initial-scale=1.0"> < span style> < span style> *{margin: 0;
            padding: 0;
        }
        .center{
            height: 200px;
            background: red;
            margin-left: 200px;
            margin-right: 150px;

        }
        .center-wrap{
            width: 100%;
        }
        .center-wrap..left..right{
            float:left;
           
        }
        .left{
            background: yellow;
            height: 200px;
            width: 200px;
            margin-left: -100%;
        }
        .right{
            background: black;
            height: 200px;
            width: 150px;
            margin-left: -150px;
        }


    </style>
</head>

<body>
    <div class="father">
        <div class="center-wrap">
            <div class="center"></div>
        </div>
        <div class="left"> < /div>
        <dov class="right"></dov>
    </div>

</body>

</html>
Copy the code