html圣杯布局,三种实现圣杯布局方法「建议收藏」

html圣杯布局,三种实现圣杯布局方法「建议收藏」本文介绍三种实现圣杯布局的方法,前两种可归为一类,与第三种方法差别在于加载顺序不同。圣杯布局实现1:步骤1:给出HTML结构:圣杯布局1*{margin:0;padding:0;text-Align:center;}#top{background:#666;height:60px;}#left{background:#E79F6D;}#content{background:…

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

本文介绍三种实现圣杯布局的方法,前两种可归为一类,与第三种方法差别在于加载顺序不同。

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

}

这是Top!
这是Left!
这是Content!

这是多行高度!

效果如下:

9ffda0159c4d

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;

}

效果如下:

9ffda0159c4d

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;

}

效果如下:

9ffda0159c4d

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

}

效果如下:

9ffda0159c4d

Paste_Image.png

步骤5:

使中间三个div高度自适应,即高度相等且等于高度最大的div,使用内外下边距相抵消的方法:

#left, #content, #right { float:left; padding-bottom: 2000px; margin-bottom: -2000px; }

最终效果如下:

9ffda0159c4d

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;

}

这是Top!
这是Left!
这是Content!

这是多行高度!
这是Right!

这是Foot!

圣杯布局实现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被覆盖)

9ffda0159c4d

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;

}

效果如下:

9ffda0159c4d

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;

}

这是Top!
这是Left!
这是Content!

这是多行高度!
这是Right!

这是Foot!

圣杯布局实现3(先加载主列):

效果如下:

9ffda0159c4d

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账号...

(0)
blank

相关推荐

  • NB-IoT应用场景_iot框架

    NB-IoT应用场景_iot框架NB-IOT实现万物互联设计思路分享(固定上报类)NB-IOT窄带物联网(NarrowBandInternetofThings,NB-IoT),是一种专为万物互联打造的蜂窝网络连接技术。NB-IOT作为近年大火的一项物联网技术,因为其特性受到了众多行业众多企业的青睐。其广覆盖,大连接,低功耗,低成本的四大主要特点符合众多行业的实现物联网平滑过度的要求,成为了物联网技术又一代宠儿。本人也…

  • django 自定义过滤器_自定义权限过滤器

    django 自定义过滤器_自定义权限过滤器前言虽然DTL给我们内置了许多好用的过滤器。但是有些时候还是不能满足我们的需求。因此Django给我们提供了一个接口,可以让我们自定义过滤器,实现自己的需求。自定义过滤器首先在某个app中,创建

  • 钉钉E应用开发踩过的小坑之钉钉官网有两个全局错误码链接,啥区别??

    钉钉E应用开发踩过的小坑之钉钉官网有两个全局错误码链接,啥区别??童鞋们注意下:做钉钉平台内部开发的有没有注意到官网有两个全局错误码链接(我只看到两个目前):https://open-doc.dingtalk.com/microapp/serverapi2/npfg02这是一个含错误码和说明(我一直看的是这个全局错误码,只看说明的话满脑子是问号啊O(∩_∩)O哈哈~)而https://open-doc.dingtalk.com/doc2/detai…

  • Win11双屏设置双壁纸–2K屏+1080P使用不同壁纸的方法

    Win11双屏设置双壁纸–2K屏+1080P使用不同壁纸的方法先上方法及效果:方法:两张图片(图1尺寸:1920×1080,图2尺寸:2560×1440),Photoshop裁减图1并与图2拼接成一张图片(尺寸:4480×1440)设置为背景图片,并在【个性化-背景】中设置为【平铺】;效果:具体步骤:1.环境:win11(win10类似),屏幕1(1080p),屏幕2(2k屏,16:9);2.所需图片:图1(1920×1080);图2(2560×1440)3.工具:Photoshop(其他拼图工具亦可)4.步骤:1)在PS中【图像-画布大小】中修改画布尺

    2022年10月27日
  • pycharm如何设置背景图片_如何设置word背景图片

    pycharm如何设置背景图片_如何设置word背景图片打开Pycharm点击左上角File如图:然后选择找到Settings点击进入,打开Appearance&Behavior,选择Appearance如图:最后找到BackgroundImage,选择好自己要设置的图片,Opacity可以调解好透明度,点击OK就可以了看效果:…

  • 基于图同构网络(GIN)的图表征网络的实现

    基于图同构网络(GIN)的图表征网络的实现基于图同构网络的图表征学习主要包含以下两个过程:首先计算得到节点表征;其次对图上各个节点的表征做图池化(GraphPooling),或称为图读出(GraphReadout),得到图的表征(GraphRepresentation)。在这里,我们将采用自顶向下的方式,来学习基于图同构模型(GIN)的图表征学习方法。我们首先关注如何基于节点表征计算得到图的表征,而忽略计算结点表征的方法。基于图同构网络的图表征模块(GINGraphReprModu

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号