当前位置：网站首页>Grail layout and double wing layout

Grail layout and double wing layout

2022-04-22 07:56:00 【halftion】

The Grail layout and the double wing layout are used to solve the problem of fixed width on both sides , Adaptive three column layout in the middle , The advantage of this layout is that the elements in the middle can be rendered prior to the elements on both sides

The Grail model comes from 2006 In a list part This article on ：In Search of the Holy Grail. It may be named because foreigners think it's too nb 了 , It can realize all the requirements of three column layout （ In Western mythology, the Holy Grail is said to realize all wishes ）. Have to say , Foreigners are really two in some ways . Part of the Grail model refers to the following article ： Holy Grail layout and double wings layout （ Front end interview must see ）

As for the twin wing model , From Taobao UED, But now Taobao home page seems to give up this layout , I don't know why .

First , First write a box with three columns （HTML）

<html>
<header>
<link href="./text.css" rel="stylesheet" type="text/css">
</header>
<body>
<header><h4>Header Content area </h4></header>
<div class="container">
    <div class="middle">
             Test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info 
    </div>
    <div class="left">
    #left
    </div>
    <div class="right">
    #right
    </div>
</div>
<footer><h4>Footer Content area </h4></footer>
</body>
</html>

In order to be more intuitive , To style several block structures （CSS） 

header{
    width: 100%;
    height: 40px;
    background-color: darkseagreen;
    }

.container{
     height:400px;
     overflow:hidden;
     } 
    
.middle{
    width: 100%;
    height: 200px; 
    background-color: deeppink;
    float:left;
    }

.left{ 
    width: 200px;
    height: 200px;
    background-color: #0000ff;
    float:left;
    }

.right{
    width: 200px;
    height: 200px;
    background-color: #a30bf0;
    float:left;
    }

footer{
    width: 100%;
    height: 30px;
    background-color: darkslategray;
    }
You can see , At this time, the display of the browser is like this ：


You can see , The three boxes are not shown on the line of the parent element , Because of the middle box , That's the first box. We gave it 100% width . That's why the left and right boxes are squeezed down .

We need to use negative margin layout , Let the box on the left go up （ Move the second box to the left the length of the first box ）：

.left{margin-left: -100%;}

Then let the box on the right go up （ Make the third box move left the length of the box itself ）： 
.right{margin-left: -200px;}
The effect of the web page is like this ：


You can see , Because the middle box is adaptive in width , So the contents of the middle box will be partially pressed by the left and right boxes . For this question , The Grail layout and the twin wing layout give different solutions .

The holy grail layout

First : Use the parent element to set the value of the left and right inner margins , Squeeze the father's box into the middle .

.container{padding: 0 200px;}

You can see , The inner margins on the left and right sides are , But the contents of the middle box are still pressed .


here , To add a positioning to the left and right boxes , And use left and right Move the box 

.left{position: relative;
    left: -200px;}
.right{position: relative;
    right: -200px;}
Now? , The Grail layout is finally done , It has also achieved the effect we want , The boxes on the left and right sides are fixed , Middle box adaptation , And the contents of the middle box are completely unaffected .


Double wing layout


The method to solve the occlusion of the double flying wing layout is relatively simple and rough , Create another sub box directly in the middle box div Used to place content

HTML Code ：

<html>
<header>
<link href="./text.css" rel="stylesheet" type="text/css">
</header>
<body>
<header><h4>Header Content area </h4></header>
<div class="container">
    <div class="middle">
        <div class="middle-wrap"><!-- The newly created div-->
             Test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info test info 
        </div>
    </div>
    <div class="left">
    #left
    </div>
    <div class="right">
    #right
    </div>
</div>
<footer><h4>Footer Content area </h4></footer>
</body>
</html>


You can see , In the middle box, a new div, At this time, you need to adjust this sub div Of margin Achieve the effect of centered display .

css Code ：

.middle-wrap{
    margin: 0 200px;
}
such , Can avoid the effect of occlusion


Compared to the Grail layout , Double wings don't have to set the left and right columns position: relative, There is no need to set the left and right left、right value , Just add one more child element containing , Corresponding padding Switch to margin. Generally speaking, it's a lot simpler .

The benefits of a dual wing configuration ：

  1. The main content is the optimization of loading first ;
  2. Compatible with all current mainstream browsers , Include IE6 , ;
  3. Realize different layout methods , You can adjust the relevant CSS Property can be implemented .

版权声明
本文为[halftion]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204220624413578.html

边栏推荐

猜你喜欢

随机推荐