五种方式实现三栏布局

多云转晴

发布于 2020-07-14 16:52:22

1.4K00

代码可运行

文章被收录于专栏：webTowerwebTower

运行总次数：0

代码可运行

在网页布局中，三栏布局是一种常见的布局方式，尤其在 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;
}

以上几种方式都可以做到中间容器自适应，但也有一个问题，如果浏览器窗口很小，中间容器的宽度会很短。