三种方式实现圣杯布局

三种方式实现圣杯布局,第1张

上一篇写了双飞翼布局,这篇我就写下他的兄弟圣杯布局吧~

圣杯布局也是实现三栏布局的方法,左右定宽,中间自适应,中间内容优先加载。

最原始的圣杯布局是通过负边距、左浮动、相对定位、内边距实现的,然后我在实践中也发现了另外两种实现方式,分别是通过怪异盒模型和flex布局

HTML结构都是相同的,我先放在这里

我们先看下最祖先的方式吧

通过负边距、左浮动、相对定位、内边距实现

1.首先给main一个100%宽度,left和right分别给一个固定的宽度,三者高度和父盒子一样高,都实现左浮动

效果如下,由于main宽度已经撑满了整个父盒子,left和right被挤到父盒子下面

所以我们要让left和right上去

2.使用负边距,给left添加margin-left:-100%(向左移动一个父盒子的宽度),给right添加一个负right宽度的左边距(向左边移动一个right盒子的宽度)

可以看到left和right成功移动到我们想到的位置了

嗯,是的,就是酱紫的滴,应该没有什么大问题了,收工收工~

使用怪异盒模型的区别就是这里不需要用定位,在mian上加padding替代container上的padding,然后将mian修改为怪异盒模型 box-sizing: border-box,我试了下效果是一样滴

这个不得了了,什么浮动、内边距、外边距、怪异盒模型统统都不要

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8366161.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存