大家好，又见面了，我是你们的朋友全栈君。
实现圣杯布局有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
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/148721.html原文链接：https://javaforall.net
