html三栏布局的方式,12种方式实现三栏布局/圣杯布局

三栏布局/圣杯布局是常见的布局方式，面试也经常问。

圣杯布局说的是左右的宽度固定，中间宽度自适应的布局。实现方式有很多，之前只是知道两三种。现在来总结一下。

总的来说，分为css3之前和css3之后的属性实现。

html结构都是这样：

css3之前的：

1.左右两栏绝对定位，父元素设置padding，中间自适应

父元素相对定位，设置padding,左右两侧绝对定位，中间的content利用块级元素的特点自动铺满.

.box { padding: 0 150px; height: 500px; position: relative; } .left { width: 150px; position: absolute; left: 0; height: 100%; background: red; } .right { width: 150px; position: absolute; right: 0; height: 100%; background: blue; } .content { height: 100%; background: blueviolet; }

2.左右两栏绝对定位，父元素设置border，中间自适应

这个和上一个很像，不同的是利用border来占据左右的空间，使中间自适应。有个小小的点就是，子元素的定位默认是以padding区域计算的，所以左右两栏的left和right要设置相应的负值。

.box { border-left: 150px solid transparent; border-right: 150px solid transparent; height: 500px; position: relative; } .left { width: 150px; po

html三栏布局的方式,12种方式实现三栏布局/圣杯布局相关推荐

Windows 打开cmd/dos窗口的12种方式（全网最全）
文章目录 1. 从`开始`菜单的应用列表打开 2. 从`搜索`打开 3. 从`运行`打开 4. 从`文件资源管理器`打开 5. 从`C:\Windows\System32\cmd.exe`打开 6. ...
php 个人摄影,展示个人摄影作品的12种方式（ZT）
展示个人摄影作品的12种方式(ZT) 2009-7-11 06:00 0706 无论你是职业摄影师,还是偶尔拍摄婚礼.会议的业余摄影师,知名度都源于有多少人了解你的作品,有多少人欣赏你的拍摄.因此,让 ...
心疼女人的12种方式(转载)
心疼女人的12种方式,男人可以参考一下...... 1.当你爱着一个女孩子,一定要记得经常对她说:我爱你.不管已经说过多少次,不管是她第几百次问你"你爱我吗?"当她对你说" ...
12 种方式轻松实现 Ruby 调用
作者 | Gregory Witek 译者 | 弯月,责编 | 王晓曼头图 | CSDN 下载自东方IC 出品 | CSDN(ID:CSDNnews) 以下为译文: 最近,与同事聊天的时候,我们谈到 ...
vue组件传值的12种方式
Vue组件间的12种传值方式当做到比较大的项目时,一个vue文件里面可能要包含上千行代码,这样不利于后期维护与问题定位,抽离成组件就尤其重要了,我在项目中遇到组件的值如何传递的问题,刚开始接触的时候 ...
电商支持类API可为电商卖家提高营收的12种方式
随着诸如物联网(IoT),人工智能(AI),增强现实/虚拟现实(AR / VR)以及区块链等技术的兴起,电商行业也因此受益良多.在与电商相关的数十种技术中,有一种可以将所有行业发展优势汇集到电商业务上 ...
Vue组件之间数据通信12种方式
目录 1.父组件向子组件传递数据 props 2.子组件向父组件传递数据($emit的用法) 3.兄弟组件通信 4.ref / $refs 5.eventBus事件总线($emit / $on) 6. ...
Azure云击败AWS的12种方式
亚马逊网络服务是一个令人赞叹的产品组合,但它远非云世界中唯一的游戏. 微软很早就意识到,企业计算的未来在于云,它一直在大力投资以拥有这一市场. 位于Azure品牌保护伞下的产品数量持续增长,并且很难找 ...
干货分享--企业微信社群促活的12种方式
微信今年公布的数据,日活(DAU)超过10亿,每天基于微信生态里面新产生的微信群就高达千万个,腾讯将企业微信与微信互通后,企业微信社群运营目前已经成为社群运营的新方向. 与微信社群一样,一个用户加入一 ...

html三栏布局的方式,12种方式实现三栏布局/圣杯布局

html三栏布局的方式,12种方式实现三栏布局/圣杯布局相关推荐

最新文章

热门文章