圣杯布局、双飞翼布局具体实现原理和实现方法

为啥写这篇文章

网上关于这两种布局的文章大多数都只是给了代码实现,而没有说出其中关键性代码的作用和原理。

布局实现的目的

1.三列布局,两端固定宽度(其实可以不用固定宽度),中间栏自适应。
2.中间栏优先渲染。
3.任意栏高度自由不限制。

效果展示

在这里插入图片描述

布局实现
一.圣杯布局

1.由于要实现中间栏先渲染,所以需要将center放置前面。

    <div class="content1 box">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

2.将center,left,right设置浮动,并设置宽度。

        .box {
            overflow: hidden;
        }
        .box div{
            text-align: center;
            font-size: 30px;
        }

        .content1 div {
            float: left;
            min-height: 300px;
        }

        .content1 .center {
            width: 100%;
            background: #9ab;
        }

        .content1 .left {
            width: 300px;
            background: #aaa;
        }

        .content1 .right {
            width: 300px;
            background: #ddd;
        }

效果如下。
在这里插入图片描述
3.接下来是最为关键的步骤,设置left的margin-left为-100%,right的margin-left为本身宽度的负值。

        .box {
            overflow: hidden;
        }
        .box div{
            text-align: center;
            font-size: 30px;
        }

        .content1 div {
            float: left;
            min-height: 300px;
        }

        .content1 .center {
            width: 100%;
            background: #9ab;
        }

        .content1 .left {
            width: 300px;
            margin-left: -100%;//关键步骤
            background: #aaa;
        }

        .content1 .right {
            width: 300px;
            margin-left: -300px;//关键步骤
            background: #ddd;
        }

效果如下。
在这里插入图片描述

首先,left为什么要使用margin-left:-100%,right要使用margin-left: -300px呢?


原理:当给margin添加%值时,是根据父元素的宽度来计算的,所以当设置margin-left:-100%后,left刚好被移动到上一行相同位置。而right不需要移动到上一行相同位置,只需要自身在上一行就行,所以只需要设置margin-left为自身的宽度负值后,自动会往上行排。通过动图不难看出来。
在这里插入图片描述

其次,看了动图和布局结构,你应该发现了,left和right只是跑到center图层的上一层,遮挡住了center的内容,而不是排挤了center的内容。加过多的字可以看到center内容被遮挡了。


在这里插入图片描述
4.解决center被遮挡。
方法一

        .box {
            overflow: hidden;
        }
        .box div{
            text-align: center;
            font-size: 30px;
        }
        
        .content1 div {
            float: left;
            min-height: 300px;
        }

        .content1 .center {
            width: 100%;
            background: #9ab;
            padding: 0 300px;//神来之笔
            box-sizing: border-box;//神来之笔
        }

        .content1 .left {
            width: 300px;
            margin-left: -100%;
            background: #aaa;
        }

        .content1 .right {
            width: 300px;
            margin-left: -300px;
            background: #ddd;
        }

效果如下
在这里插入图片描述

解释一下为什么要这样子写

box-sizing: border-box;将容器变为怪异盒模型,使得容器实际宽度=内容宽度+边框宽度+填充宽度。那么,当我设置了padding: 0 300px;之后,内容的宽度就刚好是中间的部分了。而两边的填充宽度刚好就是left和right的宽度。

方法二
如果你看了其他人的解释,会发现大多人是使用相对布局的方法,在这儿我不多说。自行百度。

二.双飞翼布局

相对于圣杯布局来说,多加了一个容器。

<div class="content2"> 
  <div class="main">
      <div class="center">center</div> 
    </div>
  <div class="left">left</div> 
  <div class="right">right</div> 
</div>

这种做法看看其他的人怎么做的8 ,我主要讲的时候使用margin-left的作用和原理。😏

  • 8
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值