圣杯布局
优先加载主体内容
基本思路是：让中间部分在结构中位于最前面，先让中间层100%宽度，占满同一高度的空间，此时 左右两层被挤至下层，然后给左右盒子设置负边距，将左右栏拉回与主体部分同一水平高度 。这时主体部分有一部分被遮挡住了，给包含三个盒子的父盒子设置margin或padding，给左右边栏留出位置 ，再接着将左右边栏设置相对定位，将它们移到对应的空白位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
text-align: center;
}
.container{
margin-left: 120px;
margin-right: 220px;
}
.main{
float: left;
width:100%;
height:200px;
background-color: rosybrown;
}
.left{
float:left;
width:100px;
height:200px;
margin-left:-100%;
position:relative;
left:-120px;
background-color: red;
}
.right{
float:right;
width:200px;
height:200px;
margin-left:-200px;
position:relative;
right:-220px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
页面效果
--------------------- 本文来自 想上天的蓝胖子 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/ll_0801xyz/article/details/77320137?utm_source=copy
