大家好，又见面了，我是你们的朋友全栈君。
本文介绍三种实现圣杯布局的方法,前两种可归为一类，与第三种方法差别在于加载顺序不同。
圣杯布局实现1：
步骤1：给出 HTML结构：
圣杯布局1
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left {
background: #E79F6D;
}
#content {
background: #D6D6D6;
}
#right {
background: #77BBDD;
}
#foot {
background: #666;
height: 50px;
}
这是多行高度！
效果如下：
Paste_Image.png
步骤2：
设置中间三个div向左浮动，使其排列在一行： #left, #content,#right{ float:left;}。
设置Foot元素清除浮动，阻止与上面的main部分重叠：#foot { background: #666; height: 50px; clear: both;}。
设置中间三个div的宽度，左右定宽，中间宽度自适应：
#left {
background: #E79F6D;
width: 150px;
}
#content {
background: #D6D6D6;
width: 100%;
}
#right {
background: #77BBDD;
width: 200px;
}
效果如下：
Paste_Image.png
步骤3：
现在Content宽度为100%，占满整个浏览器宽度，若想要中间Content给两边Left和Right挪出空间，则需要设置容器main左右padding值。
由于容器main内元素均设置左浮动，都不在文档流中，导致main高度塌陷，设置overflow:hidden可解决该问题。
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
}
效果如下：
Paste_Image.png
步骤4：
由于设置padding后，中间三个div宽度之和超过浏览器宽度，所以各独占一行，要使Left元素和Right元素分别移动到Content的左右两边，则需要给Left设置负的margin-left,给Right设置负的margin-right。
#left {
background: #E79F6D;
width: 150px;
margin-left: -150px;;
}
#right {
background: #77BBDD;
width: 200px;
margin-right: -200px
}
效果如下：
Paste_Image.png
步骤5：
使中间三个div高度自适应，即高度相等且等于高度最大的div，使用内外下边距相抵消的方法：
#left, #content, #right { float:left; padding-bottom: 2000px; margin-bottom: -2000px; }
最终效果如下：
Paste_Image.png
最终代码：
圣杯布局1
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left, #content,#right{
float:left;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
overflow: hidden;
}
#left {
background: #E79F6D;
width: 150px;
margin-left: -150px;;
}
#content {
background: #D6D6D6;
width: 100%;
}
#right {
background: #77BBDD;
width: 200px;
margin-right: -200px;
}
#foot {
background: #666;
height: 50px;
clear: both;
}
这是多行高度！
圣杯布局实现2：
与方法1的前三步相同，在第四步时采用了不同的解决方案：
步骤4-1
通过为Content和Right设置一个负的margin-left属性：
#content {
background: #D6D6D6;
width: 100%;
margin-left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
}
效果如下：(此时Left被覆盖)
Paste_Image.png
步骤4-2
设置Left和Right的positon分别调整其位置使左移和右移：
#left {
background: #E79F6D;
width: 150px;
position: relative;
left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
position: relative;
left: 200px;
}
效果如下：
Paste_Image.png
步骤四完成，步骤五同方法1。
最终代码：
圣杯布局1
* {
margin: 0;
padding: 0;
text-Align: center;
}
#top {
background: #666;
height: 60px;
}
#left, #content,#right{
float:left;
padding-bottom: 2000px;
margin-bottom: -2000px;
}
#main{
padding-left: 150px;
padding-right: 200px;
background-color: bisque;
overflow: hidden;
}
#left {
background: #E79F6D;
width: 150px;
position: relative;
left: -150px;
}
#content {
background: #D6D6D6;
width: 100%;
margin-left: -150px;
}
#right {
background: #77BBDD;
width: 200px;
margin-left: -200px;
position: relative;
left: 200px;
}
#foot {
background: #666;
height: 50px;
clear: both;
}
这是多行高度！
圣杯布局实现3(先加载主列)：
效果如下：
4770448-f4aeb930e2732d89.png
最终代码：
polandeme
body{
color: aliceblue;
}
.main-wrap{
margin-left: 190px;
margin-right: 190px;
}
/*.grid-s5m0e5 { width:100%;}*/
.col-main {
float:left;
width: 100%;
min-height:30px;
background:#000;
}
.col-sub {
float:left;
margin-left: -100%;
width:190px;
min-height:30px;
background:#f00;
}
.col-extra {
margin-left: -190px;
float:left;
width:190px;
min-height:30px;
background:#00f;
}
我是主列，出来吧！
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/149646.html原文链接：https://javaforall.net
