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)


相关推荐

  • 火狐浏览器删除表单自动提示登陆账号密码

    火狐浏览器删除表单自动提示登陆账号密码

  • OpenProcessToken

    OpenProcessTokenOpenProcessToken  要对一个任意进程(包括系统安全进程和服务进程)进行指定了写相关的访问权的OpenProcess操作,只要当前进程具有SeDeDebug权限就可以了。要是一个用户是Administrator或是被给予了相应的权限,就可以具有该权限。可是,就算我们用Administrator帐号对一个系统安全进程执行OpenProcess(PROCESS_ALL_ACCES

  • 关于服务器安装docker后无法ping通内网

    关于服务器安装docker后无法ping通内网

  • minikube 安装指南

    minikube 安装指南

  • 卡盟货源对接_卡盟排行

    卡盟货源对接_卡盟排行最近,很多小伙伴们都在想搭建一个卡盟的主站,但是鉴于很多人都不太懂编程,也不知道如何找到源码。所以现在小编就为大家带来搭建卡盟主站教程,而且还把源码也一起送来了,想要搭建卡盟主站的话就记得一定要下载哦!搭建卡盟主站教程介绍1,完整无误经过校验的卡盟平台源码2,基于Ecshop内核的卡盟平台,游戏点卡销售的首选平台PHP+MYSQL3,前台模板已做深层SEO优化便于搜索引擎收录寻找卡盟源码1网…

  • 必读,sql加索引调优案例和explain extended说明

    做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!昨天分享了Mysql中的 explain 命令,使用 explain 来分析 select 语句的运行效果,如 :explain可以获得select语句使用的索引情况、排序的情况等等。链接:顺便提到了explain extended,有小伙伴留言说想知道一些explain extended,那今天就在简单讲解一下。…

发表回复

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

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