Now write style various Flex has not? Not compatible with the IE family is quite cool, isn’t it? React Vue Angular all kinds of use, no more tedious manipulation dom? Indeed, with the development of the front-end, now seldom go to write code compatible with the disgusting ie 6 7 8, but inevitably some projects such as bank, government, and the background systems or want to consider the compatible of ie, remember a few years ago when the interview the interviewer easily ask is, one on the left side of the fixation on the right side of the layout of the adaptive, or allow you to write a holy grail layout, Double flying wing cloth. These two words will be interesting to you at first, so let’s review the next two.

The holy grail layout

HTML structure

Let’s take a look at the render style

The first step

Float main Left right all left, and set Overflow: Hidden to go BFC

The second step

Set the width of main to 100%

.main{width:100%}
Copy the code

The third step

Set left and right negative margin-left values

But you will notice that the text in main is missing because it is blocked by the left. Now the content area of main is 100% of the width of the parent element.

The fourth step

Add left and right padding to the container and position the left and right in the corresponding positions

.container{padding:0 200px; }Copy the code

.left{position:relative; left:-200px; } .right{position:relative; right:-200px; }Copy the code

At this point, our grail layout is complete.

Twin wing layout

The first 3 steps of the twin wing layout and the Holy Grail layout are the same, the difference is the fourth step (to solve the middle bar is not covered), let’s see how the holy Grail layout is implemented.

The HTML structure of the twin wing layout has changed a bit

As shown in the figure, you can see that the twin wing layout covers the middle layer with another layer

.content{margin:0 200px; }Copy the code

The layout of the two wings does not have the padding of the container and the positioning of the left and right. The left and right margin values of the content layer are used to solve the problem that the middle content area is blocked.

conclusion

Both the Holy Grail layout and the Twin Wing layout put the middle column in front of each other, allowing the main content to be loaded first, and both are ie6 compatible and above. Personally feel double flying wing layout is better, I believe you must have met such a layout in the work, do not know how you are to achieve it? If there are any inaccuracies in this article, please comment.