<style>
/* 圣杯布局和双飞翼的特点:
1、两边定宽，中间100%
2、中间部分优先渲染，提升用户体验
圣杯布局缺点:当中间区域宽度小于两边时，布局会破碎
双飞翼布局不会破碎
圣杯布局:
wrapper（div中 div左 div右）
1、wrapper >div,float:left
2、wrapper设置左右padding
3、div左, margin-left:-100%;relative
4、div右， margin-left:-200px;relative
双飞翼:
wrapper(div中(div.contain) div左 div右)
1、wrapper >div,float:left
2、div.contain设置左右margin
3、div左, margin-left:-100%
4、div右, margin-left:-200px
*/
.fl,.fr{
width: 200px;
height: 200px;
}
/* 2、负外边距+相对定位 移动到空白区域 */
.fl{
background-color: red;
/* 负外边距 */
margin-left: -100%;
/* 相对定位 */
position: relative;
left: -200px;
}
.fr{
background-color: blue;
margin-left: -200px;
position: relative;
left: 200px;
}
.center{
width: 100%;
height: 200px;
background-color: green;
}
.wrapper div{
float: left;
}
/* 1、设置padding给左右两边预留空间 */
.wrapper{
padding-left: 200px;
padding-right: 200px;
}
body{
/* 防止布局破碎 */
min-width:600px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="center">中间</div>
<div class="fl">左边</div>
<div class="fr">右边</div>
</div>
</body>
</html>