（每日一题）面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

一、背景

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

两栏布局

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，

比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器

这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器

这种布局适用于内容上具有明显主次关系的网页

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

大家最常见的就是github：

二、两栏布局

两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路也非常的简单：

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加BFC，防止下方元素飞到上方内容

代码如下：

<style>
    .box{
     
        overflow: hidden; 添加BFC
    }
    .left {
     
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
     
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

还有一种更为简单的使用则是采取：flex弹性布局

flex弹性布局

<style>
    .box{
     
        display: flex;
    }
    .left {
     
        width: 100px;
    }
    .right {
     
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

flex可以说是最好的方案了，代码少，使用简单

注意的是，flex容器的一个默认属性值:align-items: stretch;

这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start

三、三栏布局

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

• 两边使用 float，中间使用 margin
• 两边使用 absolute，中间使用 margin
• 两边使用 float 和负 margin
• display: table 实现
• flex实现
• grid网格布局