圣杯布局的构造过程:
<div class="container">
<!--先写中间部分-->
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
- 三者都设置向左浮动。
- 设置middle宽度为100%。
- 设置负边距,.left设置负左边距为100%,.right设置负左边距为负的自身宽度。
- 设置container的padding值给左右两个子面板留出空间。
- 设置两个子面板为相对定位,.left的left值为负的.left宽度,.right的right值为负的.right宽度。
圣杯布局有个问题,当面板的middle部分比两边的子面板宽度小的时候,布局就会乱掉。双飞翼布局在middle上添加一个标签解决了此问题。
双飞翼布局的构造过程:
<!--先写中间部分-->
<div class="middle">
<div class="middle-son"></div>
</div>
<div class="left"></div>
<div class="right"></div>
- 三者都设置向左浮动。
- 设置middle宽度为100%。
- 设置 负边距,.left设置负左边距为100%,.right设置负左边距为负的自身宽度。
- 设置middle-son的margin值给左右两个子面板留出空间。
二者区别:
- 双飞翼布局给主面板添加了一个父标签用来通过margin给子面板腾出空间。
- 圣杯采用的是padding,而双飞翼采用的margin,解决了圣杯布局的问题。
- 双飞翼布局不用设置相对布局,以及对应的left和right值。
圣杯布局demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo-圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
min-width: 650px;
}
header,footer{
text-align: center;
background: #aaaaaa;
}
.container{
overflow: hidden;
padding: 0 200px 0 200px;;
}
.middle{
position: relative;
float: left;
width: 100%;
background: red;
height: 100px;
}
.left{
position: relative;
float: left;
width: 200px;
background: green;
height: 100px;
margin-left: -100%;
left: -200px;
}
.right{
position: relative;
float: right;
width: 200px;
background: yellow;
height: 100px;
margin-left: -200px;
right: -200px;
}
</style>
</head>
<body>
<header><h1>header</h1></header>
<div class="container">
<!--先写中间部分-->
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer><h1>footer</h1></footer>
</body>
</html>
双飞翼布局demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
*{
margin: 0;padding: 0;
}
body{
min-width: 650px;
}
header,footer{
text-align: center;
background: #aaaaaa;
}
.middle-son{
margin: 0 200px 0 200px;
height: 100px;
}
.middle{
float: left;
height: 100px;
width: 100%;
background: red;
}
.left{
float: left;
width: 200px;
height: 100px;
background: green;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 100px;
background: yellow;
margin-left: -200px;
}
</style>
</head>
<body>
<header><h1>header</h1></header>
<!--先写中间部分-->
<div class="middle">
<div class="middle-son"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<footer><h1>footer</h1></footer>
</body>
</html>