css 布局（圣杯、双飞翼）
作者：互联网
一、 圣杯布局、
左右固宽，中间自适应
- 三列布局，中间宽度自适应，两边定宽；
- 中间部分要在浏览器中优先展示渲染；
具体步骤：
1.设置基本样式
2.圣杯布局是一种相对布局，首先设置父元素container的位置：
3.将主体部分的三个子元素都设置左浮动
4.设置main宽度为width:100%,让其单独占满一行
5.设置left和right 负的外边距
6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。
代码如下：
<!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>效果图：
二、双飞翼布局
左右固宽，中间自适应
- 左右两个div浮动，中间的div放在上面
- 通过margin-left调整到一行
- 中间div添加一个子节点，设置margin调整位置
代码如下：
<!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>效果图：
持续更新 点歌关注吧！
标签：圣杯,width,300px,双飞翼,background,left,margin,css,200px 来源： https://www.cnblogs.com/homehtml/p/11885755.html