对双飞翼及圣杯布局的理解与认识
程序员文章站
2024-01-26 12:45:04
...
对双飞翼和圣杯布局的详解。
这两个布局的最终目的都是一样的，实现中间部分的优先渲染，圣杯是国外传入的，双飞翼是淘宝UED发明的，双飞翼相对圣杯对了一个div，但是不需要相对定位，也少了几个css。
首先说圣杯，是通过相对定位实现的。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>首先让让容器container左右各留下220px和200px的内边距，并让容器内的元素都浮动，如下效果，left和right因为宽度不够被挤到下一行
对middle（蓝），left（红），right（绿）进行相关定位先通过对left的margin-left：-220px;将它上移，效果如下
再将left左移100%，通过这样就向左移动整个宽度，移动到预留好的左侧空间上
再对right进行margin-left：-200px，移动都上层图示位置
再将right右移200px，通过right：-200px来实现，达到最终效果
css代码如下
<style type="text/css">
*{margin: 0;padding: 0;}
.header,.footer{
background: black;
height: 80px;
width: 100%;
}
.container{
height: 300px;
padding: 0 200px 0 220px;
background: green;
}
.middle,.left,.right{
position: relative;
float: left;
height: 300px;
}
.middle{
width: 100%;
background: blue;
}
.left{
width: 220px;
background: red;
margin-left: -220px;
left: -100%;
}
.right{
width: 200px;
background:green;
margin-left: -200px;
right: -200px;
}
</style>接下来是双飞翼
HTML部分
双飞翼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="mainner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<div class="footer"></div>
</body>
</html>双飞翼是先通过margin-left和margin-right将中间部分mainner（蓝色）在其容器中置于图示位置，在容器的左右两侧留下空间，并将容器与left（红）和right（绿）一起浮动
再通过margin-left：-100%将left上移正行，至左侧预留的位置
再将right进行margin-left：-200px移至上层右侧预留位置，达到最终效果
css代码入下
<style type="text/css">
*{margin: 0;padding: 0；}
.header,.footer{
height: 80px;
width: 100%;
background: black;
float: left;
}
.container{
width: 100%;
height: 300px;
}
.container,.left,.right{
float: left;
height: 300px;
}
.mainner{
height: 300px;
background: blue;
margin-left: 220px;
margin-right: 200px;
}
.left{
background: red;
width: 220px;
margin-left: -100%;
}
.right{
background: green;
width: 200px;
margin-left: -200px;
}
</style>