前言
三栏布局是网页设计中一种经典布局方式,它将页面分为三个垂直部分:左栏、中栏和右栏,三栏在同一行显示。
这种布局模式在很多网站的首页或内容密集型页面中非常常见,因为它能够有效地组织信息,提供良好的用户体验。常常也是作为面试常考题出现,今天将为大家介绍常见的三栏布局的方式,其中有些就能实现优先加载中间内容。
如何实现加载中间内容,浏览器在渲染页面的时候是按写的顺序渲染,意思是要想优先加载就必须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,即可实现。
下面是效果展示:
jcode
不得不说,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容器一个内边距,变成下边这样
在给左右栏内容添加相对定位,把每个容器定位到指定位置。下面是完整代码
jcode
双飞翼布局
我也很好奇为什么名字一个个都挺奇怪的,如果有大佬知道的话,欢迎评论区告诉我一下,这个确实让我挺疑惑的。
其实双飞翼布局和圣杯布局个人感觉都挺像的
- 圣杯布局 = 浮动 + 内边距
- 双飞翼 = 浮动 + 外边距
但是双飞翼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给左右两栏提供位置。
代码如下:
jcode
结语
其实能实现三栏布局的方式有很多种,比如grip和table布局都是可以实现,这里主要是讨论可以优先渲染中栏内容的布局方式。个人还是非常喜欢flex布局,其他两种可以作为拓展知识了解。
好啦,本次分享就到这啦,喜欢的话就点个赞或者关注吧。- ̗̀(๑ᵔ⌔ᵔ๑)