前言

今天我们来介绍三栏布局，什么是三栏布局？

我们常见的网页中大多都应用了三栏布局，三栏布局是指将页面内容分为三个垂直排列的部分：左栏、中栏、右栏。这种布局的特点是，左右两栏通常具有固定的宽度，用于放置如导航、广告或侧边栏信息等内容，而中间栏的宽度则是自适应的，会根据浏览器窗口的大小自动调整，主要用于放置主体内容。

今天我们将介绍5种实现三栏布局的方法。

正文

因为三栏布局的主要目的是让主体内容先渲染出来，所以我们要先将主体内容放在最前面，我们先看圣杯布局

这个布局的特点是可以自适应屏幕的宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .page {
            height: 200px;
            padding: 0 200px;
        }

        .left,
        .right {
            height: 200px;
            width: 200px;
            background-color: #8efb97d6;
        }

        .page div {
            float: left;
        }

        .content {
            width: 100%;
            height: 200px;
            background-color: pink;
        }

        .left {
            margin-left: -200px;
            position: relative;
            left: -100%;
        }

        .right {
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="content">主体内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

我们在这段代码中将页面的高度设置成固定值200px，同时在page的左右设置了200px的内边距，这样左右两个广告位就会被挤到page的下面去了。那么我们该怎么让两个广告位去到正确的地方呢？

我们在.left中设置了相对定位的属性，然后left: -100%;，这样可以让它向左移一个page的宽度，由于我们设置了200的内边距，这个广告位就能去到正确的地方。对于右边的广告位，我们同样给了一个相对定位的属性，由于他本来的位置应该在left的右边，我们只需要right: -200px;，他就能去到正确的位置。最后我们来看看效果。

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .page {
            height: 200px;
            
        }

        .left,
        .right {
            height: 200px;
            width: 200px;
            background-color: #8efb97d6;
        }
        .page > div{
            float: left;
        }
        .content{
            height: 200px;
            background-color: #9c97c3;
            width: 100%;
        }
        .inner{
            margin: 0 200px; 
            height: 100%;
        }
        .left{
            margin-left: -100%;
        }
        .right{
          margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">
            <div class="inner">主体内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>、
    </div>
</body>
</html>

在双飞翼布局中我们没有给page添加200px的内边距。在双飞翼布局中最关键的一点是进行了内部填充。通过给内容区域内的 .inner 添加左右边距，为左右侧栏留出空间。由于 .content 的宽度为100%，.inner 的实际内容区域会自适应减去两边栏的宽度。然后我们通过给 .left 设置负的左边距（-100%），让它回到页面的最左侧开始位置。对于 .right，设置负左边距为-200px，使它紧邻 .left 之后开始，由于两者宽度均为200px，这样就形成了三栏并排且中间自适应的效果。

表格布局 表格布局是一个比较久远的一种布局方式，但是用表格布局来实现三栏布局的效果也会比较方便

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .page {
            width: 100vw;
            height: 200px;
            display: table;
            table-layout: fixed;
        }
        .page > div{
            display: table-cell;
        }
        .left,
        .right {
            height: 200px;
            width: 200px;
            background-color: #98eea4;
        }
        .content{
            width: 100%;
            height: 200px;
            background-color: #fedfc5;
        }   
    </style>
</head>

<body>
    <div class="page">
        <div class="left">广告位</div>
        <div class="content">主体内容</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

在表格布局中我们用 display: table; 把 .page 转变为一个类似表格的容器，使其子元素可以用表格单元格的方式布局。table-layout: fixed; 指定了表格的布局算法为固定布局，这意味着列宽由指定的宽度决定，或者如果没有指定，则平均分配。然后我们就可以在.page > div中使用 display: table-cell;，让他们成为表格布局中的子元素。然后对它们设置宽高属性就达到了效果。

总结

我们在本文中介绍了3种实现三栏布局的方法，其中表格布局在现代的web开发中不再常用，我们将在下文中介绍更为灵活的flex布局和grid布局。它们会提供更灵活、强大的布局控制能力，特别是在响应式和复杂布局场景下。

面试官：如何实现三栏布局？我能写五种方法！（上）

前言

正文

总结