大家好,又见面了,我是你们的朋友全栈君。
本文介绍三种实现圣杯布局的方法,前两种可归为一类,与第三种方法差别在于加载顺序不同。
圣杯布局实现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;
}
我是主列,出来吧!
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149646.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...