面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

[linwu-hi]

面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

一、背景

在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高。

两栏布局

两栏布局实现效果是将页面分割成左右宽度不等的两列，其中宽度较小的列设置为固定宽度，而剩余宽度则由另一列自适应撑满。这种布局适用于内容上具有明显主次关系的网页，比如 Ant Design 文档中的蓝色区域为主要内容布局容器，而侧边栏为次要内容布局容器。

三栏布局

三栏布局按照左、中、右的顺序进行排列，通常中间列最宽，左右两列次之。一个常见的例子是 GitHub 的页面布局：

二、两栏布局

两栏布局非常常见，通常是一个定宽栏和一个自适应栏并排展示。

实现思路有多种方式：

使用 Float 实现两栏布局

<style>
    .container {
        overflow: hidden; /* 添加 BFC */
    }
    .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        margin-left: 210px; /* 左栏宽度 + 10px 间距 */
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="container">
    <div class="left">左栏</div>
    <div class="right">右栏</div>
</div>

使用 Flexbox 实现两栏布局

<style>
    .container {
        display: flex;
    }
    .left {
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        flex: 1;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="container">
    <div class="left">左栏</div>
    <div class="right">右栏</div>
</div>

三、三栏布局

实现三栏布局中间自适应的布局方式有多种：

使用 Flexbox 实现三栏布局

<style>
    .container {
        display: flex;
    }
    .left {
        width: 200px;
        background-color: coral;
        height: 200px;
    }
    .right {
        width: 200px;
        background-color: lightblue;
        height: 200px;
    }
    .middle {
        flex: 1;
        background-color: lightpink;
        height: 200px;
    }
</style>
<div class="container">
    <div class="left">左栏</div>
    <div class="middle">中栏</div>
    <div class="right">右栏</div>
</div>

使用 Grid 布局实现三栏布局

<style>
    .container {
        display: grid;
        grid-template-columns: 200px 1fr 200px;
    }
    .left {
        background-color: coral;
        height: 200px;
    }
    .right {
        background-color: lightblue;
        height: 200px;
    }
    .middle {
        background-color: lightpink;
        height: 200px;
    }
</style>
<div class="container">
    <div class="left">左栏</div>
    <div class="middle">中栏</div>
    <div class="right">右栏</div>
</div>

这些实现方式都能有效地实现两栏布局和三栏布局中间自适应的效果，具体选择哪种方式取决于具体的项目需求和兼容性要求。

参考文献

• 适应两种布局
• CSS布局之三栏布局