前言

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

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

   <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，咳咳扯远了。首先我们先设置三栏内容，如下图所示

* {       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结构稍微有点不同

<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给左右两栏提供位置。代码如下：

结语

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