给三个div设置左浮动，因为父容器设置了padding值，中间main的宽度等于芙蓉区内容的宽度，
设置左右两侧的宽度为190px;父容器padding值为200px;设置190px;是为了方便查看显示效果：
左边设置margin-left:-100%;是为了让左侧栏移动到元素最左侧，右边设置margin-left:-190px;是让其移动到最右侧；
设置position:relative;right:-200px;
是为了让右侧栏填充父元素的padding-right值空出来的位置，不要覆盖main上面在同一行位置；设置左侧栏posotion:relative;left:-200px;是为了让左侧栏填充
父元素左侧的padding-left值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.page {
padding: 0 200px; /*设置父容器左右padding值为200px*/
min-width: 200px;
}
.main {
width: 100%;
height: 30px;
background-color: skyblue;
float: left;
}
.left {
width: 190px; /*设置左边布局宽度为190px*/
height: 30px;
background-color: blue;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 190px; /*设置左边布局宽度为190px*/
height: 30px;
background-color: pink;
float: left;
margin-left: -190px;
position: relative;
right: -200px;
}
/*圣杯布局*/
</style>
</head>
<body>
<div class="page">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
圣杯布局代码
时间： 2024-08-10 02:10:17