三栏布局
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三栏布局相关的知识,希望对你有一定的参考价值。
参考技术A三栏布局,左右两栏宽度固定,中间栏宽度自适应。
假设我们有以下 html 结构:
基本样式如下:
本文将介绍几种实现三栏布局的方式。
这里会有一点不一样,我们需要调整一下类为 .right 标签的位置。
三栏布局那些事儿
中间宽度自适应,两边宽度固定的三栏布局,是前端页面开发中极为常见网站布局方式。博主认为,一名合格的前端工程师总是会将之熟记于心。
以下是博主总结的五种三栏布局的常用方法,与大家分享。
正文
1、浮动布局
浮动布局是一种极易理解,也是初学者首先想到的布局方式。仅借用CSS的float属性即可轻松实现。
html代码
<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>
<!-- 注意其先后顺序,main必须在left和right后-->
CSS代码
.left{
background-color: #ffd0d0;
width: 160px;
height: 400px;
float: left;
}
.right{
background-color: #a9ffa9;
width: 160px;
height: 400px;
float: right;
}
.main{
background-color: #ffffa9;
height: 500px;
width: auto;
}
注意html代码中三栏的先后顺序
浮动布局的优点是简单,但也有不少缺点:
- 主要内容main在文档后侧,所以直到最后才能渲染主要内容。
- left和right其实是浮动到了main上面,也就是说,当主栏高度大于侧栏高度时(这种情况极为常见),main下面的部分内容会和页面同宽。不多说,下面一张图胜过千言万语。
2、绝对定位布局
仅两个侧栏使用绝对定位,脱离文档流,始终在页面的两边。然后,为了避免主栏和侧栏内容重叠,给主栏设置外边距,其数值等于侧栏宽度。
html代码
<div class="main">Main</div>
<div class="right">Right</div>
<div class="left">Left</div>
CSS代码
.main{
background-color: #ffffa9;
height: 500px;
width: auto;
margin: 0 160px;
/* min-width: 200px; */
}
.left{
background-color:#ffd0d0;
width:160px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.right{
background-color: #a9ffa9;
width: 160px;
height: 400px;
position: absolute;
top: 0;
right: 0;
}
用绝对定位布局思路简单清晰,但有一个明显的缺点,就是如果中间栏有最小宽度限制,当浏览器 缩小至一定程度时,会出现层叠现象。如下图
3、圣杯布局
最为经典的圣杯布局,其思路主要是借用浮动分别将左栏和右栏浮动至主栏的两边;然后用外层容器的内边距将主栏两边“推”向中间一定宽度,给左栏和右栏腾出空间;最后借助相对定位 将左栏和右栏定位至合适位置即可。
话不多说,先上代码:
html代码
<div class="container">
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
CSS代码
.container{
/*向中间“推”主栏,给两个侧栏 腾地儿*/
padding: 0 160px;
}
.main{
background-color: #ffffa9;
width: 100%; /*主栏宽度设置为100%,自适应*/
height: 500px;
float: left;
}
.left{
background-color:#ffd0d0;
width: 160px;
height: 500px;
position: relative;
float: left;
/*左侧外边距为-100%,也就是主栏的宽度,使.left上浮,且左移至main的左边*/
margin-left:-100%;
/*.left继续左移,直到屏幕的最左边,此时.left正好占据.container左边padding的160px*/
left: -160px;
}
.right{
background-color: #a9ffa9;
width: 160px;
height: 400px;
float: right;
/*上移至容器最右边*/
margin-right: -160px;
position: relative;
}
注意,main(也就是主栏)在最前面,两个侧栏尾随其后,当然左栏和右栏谁在前谁在后都是可以的。这样布局的好处是:主栏在文档的前面,所以重要的东西会优先渲染。
4、双飞翼布局
双飞翼布局是对圣杯布局的优化,以增加一个div为代价换取去掉了相对布局。
“双飞翼”,顾名思义,是在main外围增加一个div(.main-outer),然后给.main-outer设置左右内边距(或者给main设置外边距,效果相同),像两个翅膀。两侧栏上浮后刚好位于.main-outer的内边距处,因此内边距的值需等于侧栏的宽度.
html代码
<div class="container">
<div class="main-outer">
<div class="main">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
CSS代码
.main-outer{
box-sizing: border-box;
padding: 0 160px;
width: 100%;
float: left;
}
.main{
background-color: #ffffa9;
height: 500px;
}
.left{
background-color:#ffd0d0;
width:160px;
height: 400px;
float: left;
margin-left:-100%;
}
.right{
background-color: #a9ffa9;
width: 160px;
height: 400px;
float: left;
margin-left: -160px;
}
主栏内容同样在文档的开头部分,优先渲染。双飞翼布局不需使用相对定位,相对来说更易理解。
5、使用flex布局
是时候拿出终极武器了,flex布局。万能的flex啊,赐我以能量吧!
html代码
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
CSS代码
.container{
display: flex;
/*以下是默认属性,不写也行,为便于理解,博主在此将其罗列出来
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start; */
}
.main{
background-color: #ffffa9;
height: 500px;
width:100%;
}
.left{
background-color:#ffd0d0;
width:160px;
height: 400px;
}
.right{
background-color: #a9ffa9;
width: 160px;
height: 400px;
}
上面代码有一个缺陷,就是在html代码中,left,main,right的相对位置不能改变,这就导致了main中的主要内容不能被优先渲染。那怎么办呢?(≧?≦)ゞ
万能的flex当然有办法咯!
给.mian.left.right三个类中添加如下代码:
.left{
order: 1;
}
.main{
order: 2;
}
.right{
order: 3;
}
搞定!
***
以上五种方法各有优缺点,根据实际情况挑选适合项目的即可,大的项目的尽量使用main内容可优先渲染的。
以上是关于三栏布局的主要内容,如果未能解决你的问题,请参考以下文章