在网页布局中,三栏布局是一种常见的布局方式,尤其在 PC 端。如下图所示。
三栏布局
从上到下由页头、内容和页脚组成,内容由左、中、右三列组成,其中左右两列的宽度固定,中间一列自适应。假设左右宽度是 100px,header 和 footer 的高度是 60px。
下面介绍五种方式,分别是:浮动、绝对定位、flex-box
和 grid-box
和表格布局。
HTML 骨架如下:
<main>
<header>header</header>
<article>
<section class="left">left</section>
<section class="center">center</section>
<section class="right">right</section>
</article>
<footer>footer</footer>
</main>
使用浮动需要把 HTML 骨架调整一下,将三个 section
的顺序调整为:
<!-- center 移到第一个 -->
<section class="center">center</section>
<section class="left">left</section>
<section class="right">right</section>
代码如下:
header{
height: 60px;
}
footer{
height: 60px;
/* article 中的元素使用了浮动,这里清除一下 */
clear: both;
}
article{
/* 值是三个时,分别表示 上、左右、下 */
/* 左右的 padding 值应与 left、right 区域宽度一致 */
padding: 0 100px 0;
}
article section{
float: left;
}
.center{
/* 让中间的容器宽度等于父容器的宽度 */
/* 父容器还有 padding,因此父容器两侧会有 100px 的空白区域 */
width: 100%;
}
.left{
width: 100px;
/* margin 的值是百分比时,是相对于父容器的宽度 */
/* -100% 会向左移动父容器的宽度那么长 */
margin-left: -100%;
/* 使用相对定位 */
position: relative;
right: 100px;
}
.right{
width: 100px;
margin-right: -100px;
}
这种实现被称为“圣杯布局”。除了上面的方式之外,使用浮动 + calc
也可以做到中间部分自适应。HTML 骨架也不需要做调整。代码如下:
header{
height: 60px;
}
footer{
height: 60px;
clear: both;
}
article section{
float: left;
}
.left {
width: 100px;
}
.right {
width: 100px;
}
.center{
/* 宽度是一个计算值,用父容器宽度,减去左右容器的宽度 */
width: calc(100% - 200px);
}
还有一种常见的使用浮动实现的三栏布局,被称为“双飞翼布局”。它的 HTML 结构如下:
<main>
<header>header</header>
<article class="container column">
<section class="center">center</section>
</article>
<article class="left column">left</article>
<article class="right column">right</article>
<footer>footer</footer>
</main>
CSS 代码如下:
.container{
width: 100%;
}
.column{
float: left;
}
.center{
margin: 0 100px 0;
}
.left{
width: 100px;
margin-left: -100%;
}
.right{
width: 100px;
margin-left: -100px;
}
footer{
clear: both;
}
双飞翼布局与圣杯布局相似,不同的是双飞翼布局没有使用相对定位。
代码如下:
header{
height: 60px;
}
footer{
height: 60px;
}
article{
position: relative;
}
article section{
position: absolute;
height: 200px;
}
.left {
width: 100px;
}
.right {
right: 0;
width: 100px;
}
.center{
/* 左右都设置值,可以让中间容器自适应 */
left: 100px;
right: 100px;
}
绝对定位不好的一点是,因为元素脱离了文档流,导致 footer
元素会“往上跑”,与定位元素重叠。要让 footer
跑到下面,需要做额外的样式处理,比如设置 margin-top、给 footer
也设置上绝对定位。如果三个容器的高度不一致,或者容器内的内容溢出,就会影响布局美观性。不推荐使用这种方式实现圣杯布局。
使用弹性盒子很容易创建出圣杯布局。代码如下:
article{
display: flex;
}
.left, .right{
/* 这里的宽度也可以使用 flex 中的 flex-basis 属性 */
/* flex-basis 表示 flex 元素在主轴方向上的初始大小 */
/* flex-basis: 100px */
width: 100px;
}
.center{
flex-grow: 1;
}
flex-grow
是重点,它指定 flex 容器中剩余空间的多少应该分配给项目。因为左右容器的宽度都已经确定,如果指定是 1,表示剩余空间都分配给 .center
容器。如果是 .5
则表示分配一半空间给中间的容器。
网格布局是新出的一种布局方式。首先改造一下 HTML 骨架。代码如下:
<main>
<header>header</header>
<section class="left">left</section>
<section class="center">center</section>
<section class="right">right</section>
<footer>footer</footer>
</main>
然后是 CSS 代码:
main{
display: grid;
grid-template-columns: 100px 1fr 100px;
}
header, footer{
height: 60px;
grid-column: 1/-1;
}
网格布局比较难理解,属性众多,但可以轻松布局出复杂的页面。解释一下上面的 css 代码。在 grid-template-columns 属性中设置了三列的页面布局。行数是自适应的。三列的左右两端都是 100px,中间是自适应,1fr
在这里会分配剩余的空间。
接着设置 header
和 footer
,重新设置它们占用的列数,1/-1
表示占满一行(自己独占一列)。
在不改变 HTML 骨架的情况下使用 grid 布局,只需要设置 article
容器为网格布局即可。代码如下:
article{
display: grid;
grid-template-columns: 100px 1fr 100px;
}
两行代码就可以做到圣杯布局,足见网格布局的强大。
使用表格布局也可以做到中间容器自适应,代码如下:
article{
display: table;
width: 100%;
}
article section{
/* 子元素是单元格 */
display: table-cell;
}
.left{
width: 100px;
}
.right{
width: 100px;
}
以上几种方式都可以做到中间容器自适应,但也有一个问题,如果浏览器窗口很小,中间容器的宽度会很短。
中间部分变得很窄
解决这个问题可以在 body
元素上设置一个最小宽度,当窗口宽度比这个宽度还要小时,就不再自适应。
body{
min-width: 600px;
}