圣杯布局的原理

圣杯布局的原理圣杯布局的起源InSearchoftheHolyGrail圣杯布局解决的问题两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。圣杯布局的原理HTML代码<divclass="content"><divclass="centercol"></div><divclass="leftcol"></div>

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

圣杯布局的起源

In Search of the Holy Grail

圣杯布局解决的问题

两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。

圣杯布局的原理

HTML代码

<div class="content">
    <div class="center col">
    </div>
    <div class="left col">
    </div>
    <div class="right col">
    </div>
</div>

CSS代码

第一步:定义容器content的样式padding: 0 100px,以及center,left,right的公共样式,同时定义每个容器的颜色和宽度,左右固定一百,中间100%;

.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; }
.right{ background-color: green; }
.center{ width: 100%; background-color: pink; }

效果图:
基础样式效果图

第二步:采用负边距将left和right放到左右两边
1. 当左右设置不同方向负边距margin-left和margin-right

.left{ 
   margin-left:-100%;}
.right{ 
   margin-right:-100px;}
  1. 当左右设置同方向负边距margin-left
.left{ 
   margin-left:-100%;}
.right{ 
   margin-left:-100px;}

效果图:
采用负边距定位效果图

此时我们可以清晰的看到center的左右两边都被left和center遮挡,此时圣杯布局如何处理呢?
第三步:用相对定位来解决
1. 当左右设置不同方向负边距margin-left和margin-right

.left{ 
   right:100px;}
  1. 当左右设置同方向负边距margin-left
.left{ 
   right:100px;}
.right{ 
   left:100px;}

最终效果和CSS代码

效果图:
相对定位后的效果图
1. 当左右设置不同方向负边距margin-left和margin-right

.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; margin-left: -100%; right: 100px; }
.right{ background-color: green; margin-right: -100px; }
.center{ width: 100%; background-color: pink; }
  1. 当左右设置同方向负边距margin-left
.content{ 
   padding: 0 100px;}
.col{ float: left; height: 200px; position: relative; }
.left,.right{ width: 100px; }
.left{ background-color: blue; margin-left: -100%; right: 100px; }
.right{ background-color: green; margin-left: -100px; left:100px; }
.center{ width: 100%; background-color: pink; }

优点:

  • 兼容所有浏览器
  • 不用JS计算中间容器宽度就能自适应

缺点:

  • 采用了相对定位,既然用了相对定位(position:relative;),何不使用绝对定位(position:absolute;),更加简单、直接、易懂!

其他

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148520.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • js indexOf()用法

    js indexOf()用法&lt;1&gt;indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。语法stringObject.indexOf(searchvalue,fromindex)参数 描述 searchvalue 必需。规定需检索的字符串值。 fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是0到stringObj…

  • MD5加密「建议收藏」

    MD5加密「建议收藏」MD5是一种不可逆的加密算法,它是可靠的,并且安全的。在python中不用手写这一套算法,只需要引入一个叫hashlib的模块就能搞定MD5的加密工作。这样操作也不是最安全的,因为我们可以通过以下

  • 利用Matlab对经典鸢尾花数据集实现决策树算法分类,并绘图

       最近在学习数据挖掘,其实决策树分类看过去好久了,但是最近慢慢的想都实现一下,加深一下理解。  知道决策树有很多现成的算法(ID3,C4.5、CART),但是毕竟核心思想就是那几点,所以本篇博客就是我随便实现的,没有参考现有的决策树算法。考虑到实现分类起码需要一个数据集,所以我选择了经典的鸢尾花数据集,下载地址:Iris   选择iris.data点击右键连接另存为,即可…

  • 零基础学Java(1)初识Java程序

    零基础学Java(1)初识Java程序前言就国内来说,Java毫无疑问是后端语言中的No.1没有之一,所以今天我们也来0基础学习Java!!!Java的好处(针对测试工程师)面试加分->涨薪大多数公司服务端用的都是Java,

  • MemWatch的使用「建议收藏」

    MemWatch的使用「建议收藏」博主的新Blog地址:http://www.brantchen.com欢迎訪问:)      linux下的測试工具真是少之又少,还不好用,近期试用了memwatch,感觉网上的介绍不太好,所以放在这里跟大家分享 。事实上大部分都是看的帮助,非常多地方翻译得不好还有错,请原谅指出最好看原文。假设转载或引用,请注

  • 什么是classpath[通俗易懂]

    什么是classpath[通俗易懂]大纲一、classpath属性作用classpath属性作用在日常的开发中或者初学者中,都是直接使用工具进行Java的开发或学习,如eclipse,idea、myeclipse这类的开发工具,由

发表回复

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

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