html圣杯布局,HTML+CSS实现圣杯布局！[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

实现圣杯布局有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;

}

下面是效果图，效果是一样的！

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148721.html原文链接：https://javaforall.cn