role

The Grail layout and the twin wing layout are used to solve the fixed width on both sides, adaptive three-column layout in the middle.

The difference between

Both layouts start by setting float:left, and negative values for margin-left and margin-right, so that the three elements appear side by side in a three-column layout.

The difference is in the way the middle box is handled. How to do it without covering the contents of the middle box so that it can be fully displayed:

  • The Holy Grail layout is to set padding-left and padding-right with the parent element to leave space for the left and right boxes. Then the left and right boxes are positioned relative to each other to change the values of left and right without blocking the middle div.

  • A twin-wing layout creates child divs directly inside the middle div that are used to place content. And set margin-left and margin-right of the sub-div, leaving a position for the left and right divs. The left and right boxes do not need to set position:relative and right,left attributes.

The holy grail layout

First, the page structure is presented

//middle The first one is to implement browser-first rendering. <div class="parent">
    <div class="middle all"></div>
    <div class="left all"></div>
    <div class="right all"></div>
</div>
Copy the code

Next, let’s set the width and height of each of the three columns. Here we use 200px height for each column. Because the middle column width is adaptive, we set it to 100%.

.all{
    height: 200px;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    width:200px;
    background-color: red;
}
.right{
    width:100px;
    background-color: dodgerblue;
}
Copy the code

float 

.all{
    height: 500px;
    float:left;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    width:200px;
    background-color: red;
}
.right{
    width:100px;
    background-color: dodgerblue;
}
Copy the code

.all{
    height: 200px;
    float: left; } .middle{ width: 100%; background-color: yellow; } .left{ margin-left: -100%; width:200px; background-color: red; } .right{ margin-right: -100px; // width:100px; background-color: dodgerblue; }Copy the code

middle

The parent element needs to set the padding to make room for the boxes on the left and right, which is the same size as the boxes on the right and left:

.parent{
    height: 200px;
    padding: 0 100px 0 200px;
}
.all{
    height: 200px;
    float: left;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    margin-left: -100%;
    width:200px;
    background-color: red;
}
.right{
    margin-right: -100px;
    width:100px;
    background-color: dodgerblue;
}
Copy the code

parent
padding
left
right 

.parent{
    height: 200px;
    padding: 0 100px 0 200px;
}
.all{
    height: 200px;
    float: left;
}
.middle{
    width: 100%;
    background-color: yellow;
}
.left{
    position: relative;
    margin-left: -100%;
    left: -200px;
    width:200px;
    background-color: red;
}
.right{
    position: relative;
    margin-right: -100px;
    right: 0px;
    width:100px;
    background-color: dodgerblue;
}
Copy the code

To summarize the implementation of the Holy Grail layout:

  1. The parent element contains three elements, each set to float left
  2. The middle box is set to 100% width, adaptive, and is displayed at the front of the three elements, first rendered
  3. Use left and rightmargin-left,margin-rightNegative values of, so that they line up with the middle box, (left: -100%, right: -width of the right box)
  4. After 100%, the parent element needs to use the padding to set the left and right sides to be blank, leaving the same amount of space for the left and right sides of the box
  5. Set left and right position:relative, passleftandrightMobile location

Twin wing layout

The layout of the twin wings is relatively simple, I will sum up:

  1. The parent element contains three elements, each set to float left
  2. The middle box is set to 100% width, adaptive, and is displayed at the front of the three elements, first rendered
  3. Left and right Settingsmargin-leftNegative values of, so that they line up with the middle box, (left: -100%, right: -width of the right box)
  4. In the middledivInternal createThe child divIs used to place content. And settingThe child divthemargin-leftandmargin-rightIs left and rightdivSet aside position
<div class="parent ">
    <div class="middle">
        <div></div>
    </div>
    <div class="left all"></div>
    <div class="right all"></div>
</div>
Copy the code
.parent{
    height: 200px;
    overflow: hidden;
}
.all{
    height: 200px;
    float: left;
}
.middle{
    float: left; width: 100%; } .middle > div{ margin: 0 100px 0 200px; // Leave space for the left and right boxes height: 200px; background-color: yellow; } .left{ margin-left: -100%; width:200px; background-color: red; } .right{ margin-left:-100px; width:100px; background-color: dodgerblue; }Copy the code

Learning notes, examples are self – typing.

Reference links: blog.csdn.net/zheng182371…