前言

三栏布局是网页设计中一种经典布局方式，它将页面分为三个垂直部分：左栏、中栏和右栏 ，三栏在同一行显示。这种布局模式在很多网站的首页或内容密集型页面中非常常见，因为它能够有效地组织信息，提供良好的用户体验。常常也是作为面试常考题出现，今天将为大家介绍常见的三栏布局的方式，其中有些就能实现优先加载中间内容。

如何实现加载中间内容，浏览器在渲染页面的时候是按写的顺序渲染，意思是要想优先加载就必须html结构在前面。html结构如下：

ini 复制代码

   <div class="page">
        <div class="content">中栏内容</div>
        <div class="left">左栏内容</div>
        <div class="right">右栏内容</div>
    </div>

html结构已经确定，接下来的就是css布局样式。话不说，发车！- ̗̀(๑ᵔ⌔ᵔ๑)

flex布局

不多说，flex布局是个人认为目前最强的布局了。灵活多变，满足一切需求。那让我们是实现一下任务需求：

首先要实现三栏内容在同一行中，我们给父元素设置弹性布局，则子元素都会在同一行展示 .page{display:flex}
要将中栏内容放在中间显示，左栏在左边，右栏在右边显示。这时候我们需要flex布局中的一个属性order，这个属性可以定义项目的排列顺序，数值越小，排列越靠前，默认为0。所以我们只需要让中栏内容order为1，左栏为默认0，右栏为2，即可实现。下面是效果展示：不得不说，flex布局是真的简单。但是问题真的有这么简单吗？是的确实这么简单.，咳咳，其实远在flex布局还没有出现的时候，也已经有超级大佬想出了非常好的解决办法，本篇文章也主要是以讲解这些方法的思路为主。那首先介绍的就是圣杯布局

圣杯布局

圣杯布局。。我怎么一开始就想到了fate，咳咳扯远了。首先我们先设置三栏内容，如下图所示

css 复制代码

* {
       padding: 0;
       margin: 0;
  }

.page {
       height: 200px;
      }
.left,
.right {
       height: 200px;
       width: 200px;
       background: #0ed898;
}

.content {
        height: 200px;
        width: 100%;
        background: pink;
}

三栏内容分行显示，圣杯布局的首先样式便是让三栏内容先全部浮动，首先达成可以在一行显示，但是由于中栏内容宽度为100%，所以其他两栏内容将会被挤下去

圣杯布局的精髓就是给.page容器一个内边距，变成下边这样

在给左右栏内容添加相对定位，把每个容器定位到指定位置。下面是完整代码

双飞翼布局

我也很好奇为什么名字一个个都挺奇怪的，如果有大佬知道的话，欢迎评论区告诉我一下，这个确实让我挺疑惑的。其实双飞翼布局和圣杯布局个人感觉都挺像的

圣杯布局 = 浮动 + 内边距
双飞翼 = 浮动 + 外边距
但是双飞翼html结构稍微有点不同

ini 复制代码

<div class="page">
        <div class="content">
            <div class="inner"> 中栏内容</div>
        </div>
        <div class="left">左栏内容</div>
        <div class="right">右栏内容</div>
    </div>

中栏内容使用了一个inner类名的div包裹，作用就是让inner盒子产生一个外边距 margin: 0 200px，给左右两栏提供位置，而圣杯布局是通过padding给左右两栏提供位置。代码如下：

结语

其实能实现三栏布局的方式有很多种，比如grip和table布局都是可以实现，这里主要是讨论可以优先渲染中栏内容的布局方式。个人还是非常喜欢flex布局，其他两种可以作为拓展知识了解。好啦，本次分享就到这啦，喜欢的话就点个赞或者关注吧。- ̗̀(๑ᵔ⌔ᵔ๑)

面试官：请你实现三栏布局并且优先加载中间内容 我：稳啦- ̗̀(๑ᵔ⌔ᵔ๑)

前言

flex布局

圣杯布局

双飞翼布局

结语

面试官：请你实现三栏布局并且优先加载中间内容我：稳啦- ̗̀(๑ᵔ⌔ᵔ๑)