First, the Holy Grail layout,
Wide around the solid intermediate adaptive
- Three layout, the width of the intermediate adaptive, fixed width on both sides;
- The middle part of the show to give priority to render in the browser;
Specific steps:
1. Set basic pattern
2. The layout is a relative layout Grail, first set the position of the container parent element:
3. The three sub-elements of the body portion are disposed left float
4. Set main width width: 100%, allowed to occupy a single line
5 is provided outside the left and right from the negative
6. Next as long as the left and right, respectively, to move the two blank on it. Relative positioning movement can be used left and right portions.
code show as below:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>圣杯布局</title>
<style>
body{
margin:0;
}
.box{
margin:0 auto;
width:900px;
height:300px;
background-color:orange;
padding:0 200px;
}
.left{
width:200px;
height:300px;
background-color:red;
float:left;
margin-left:-100%;
position:relative;
left:-200px;
}
.center{
width:100%;
height:300px;
background-color:pink;
float:left;
}
.right{
width:200px;
height:300px;
background-color:blue;
float:left;
margin-left:-200px;
position:relative;
right:-200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>Renderings:
Second, Flying wing
Wide around the solid intermediate adaptive
- Two right and left floating div, div on top of the intermediate
- By adjusting the margin-left line
- Div intermediate add a child node, the position of the adjustment margin is provided
code show as below:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>双飞翼布局</title>
<style>
body{
margin:0;
}
.box{
margin:0 auto;
width:900px;
height:300px;
background-color:orange;
}
.warp{
margin:0 200px;
}
.left{
width:200px;
height:300px;
background-color:red;
float:left;
margin-left:-100%;
}
.center{
width:100%;
height:300px;
background-color:pink;
float:left;
}
.right{
width:200px;
height:300px;
background-color:blue;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
<div class="warp"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>Renderings:
