大家好，又见面了，我是你们的朋友全栈君。
实现圣杯布局有2中方法：
1、flex布局：(推荐)
爸爸直接上代码:
header
left
middle
right
footer
下面是CSS代码：
html, body{ padding: 0; margin: 0; text-align: center;}
header, footer{ border: 1px solid #333; background: #ccc;}
section{ display: flex;}
.left{ width: 200px; background: red;}
.middle{ flex: 1; background: green;}
.right{ width: 200px; background: blue;}
2、浮动非主流(float)
HTML代码：需要把middle放在最前面
header
middle
left
right
footer
上样式：
html, body{
padding: 0;
margin: 0;
text-align: center;
}
header, footer{
border: 1px solid #333333;
background: #CCCCCC;
}
footer{
clear: both;
}
section{
/* 给left和right空出位置 */
padding: 0 200px 0 200px;
overflow: hidden;
}
.left, .middle, .right{
position: relative;
float: left;
}
.middle{
width: 100%;
background: green;
}
.left{
/* 让left回到上一行最左侧 */
margin-left: -100%;
/* 让left回到最左侧 */
left: -200px;
width: 200px;
background: red;
}
.right{
margin-left: -200px;
right: -200px;
width: 200px;
background: blue;
}
下面是效果图，效果是一样的！
11221190629.png
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/148721.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
