CSS面试：五种方式实现三栏布局（左右固定，中间自适应），以及优缺点的对比。

怼烎@ 2022-05-27 06:27 173阅读 0赞

### 题目：如何实现高度200，左右宽度为300，中间自适应的三栏布局？ ###

请大家在看到这个问题时，先想一想自己能用几种方式实现这个题目？？？

1.  浮动布局。代码如下：

<style>
            .parent {
                width: 100%;
                height: 200px;
            }
    
            .right {
                float: right;
                background: #00b3ee;
                height: inherit;
                width: 300px;
            }
    
            .left {
                height: inherit;
                float: left;
                background: #eee789;
                width: 300px;
            }
            .center {
                height: inherit;
                background: #7b007b;
            }
         
        </style>
        <div class="parent">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"></div>
        </div>

效果图：![这里写图片描述][SouthEast]  
这里要注意的是，不要把right和center两个容器的位置放反了。  
2. 绝对定位实现。代码如下：

<style>
            .parent {
                position: relative;
                width: 100%;
                height: 200px;
            }
            .left {
                position: absolute;
                width: 200px;
                background: #007bff;
                height: 200px;
            }
            .center {
                position: absolute;
                background: #7b007b;
                height: 200px;
                left: 200px;
                right: 200px;
            }
            .right {
                right: 0;
                position: absolute;
                width: 200px;
                background: yellow;
                height: 200px;
            }
        </style>
        <div class="parent">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>

效果图：![这里写图片描述][SouthEast 1]  
3. flex布局。代码：

<style>
            .parent > *{
                height: 200px;
            }
            .parent {
                width: 100%;
                height: 200px;
                display: flex;
            }
            .left {
                background: yellow;
                width: 300px;
            }
            .center {
                background: #7b007b;
                flex: 1;
            }
            .right {
                background: #00aa88;
                width: 300px;
            }
        </style>
        <div class="parent">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>

效果图：![这里写图片描述][SouthEast 2]  
4. 表格布局。代码：

<style>
            .parent {
                display: table;
                width: 100%;
                height: 200px;
            }
            .parent > *{
                height: 200px;
                display: table-cell;
            }
            .left {
                background: yellow;
                width: 300px;
            }
            .center {
                background: #00aa88;
            }
            .right {
                width: 300px;
                background: #00aced;
            }
        </style>
        <div class="parent">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>

效果图：![这里写图片描述][SouthEast 3]  
5. 最后一种， grid网格布局，代码：

.parent {
                width: 100%;
                display: grid;
                grid-template-rows: 200px;    /*行的高度*/
                grid-template-columns: 300px  auto 300px;   /*列的宽度*/
            }
            .center {
                background: #2fd3dc;
            }
            .left {
                background: #ff7f78;
            }
    
            .right {
                background: #007bff;
            }
    
        </style>
        <div class="parent">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>

效果图：![这里写图片描述][SouthEast 4]

[SouthEast]: /images/20220527/fadfd0536d794065adb9976d5d60552b.png
[SouthEast 1]: /images/20220527/8d0ddef1a6bd4e15a21ff3d203969cfe.png
[SouthEast 2]: /images/20220527/2027b4d1ba024a27b31bc90329680b77.png
[SouthEast 3]: /images/20220527/7a68ae47adab4c769d1fdfb55323294d.png
[SouthEast 4]: /images/20220527/5924a4399c844ab09c236fc71edc47e5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

在前端日常布局中，会经常遇到左侧宽度固定，右侧自适应或者左右两边固定，中间部分自适应的实用场景。本文例子中将列举出两种常用的两栏布局，左侧固定右侧自适应的常用方法以及代码...

谁践踏了优雅/ 2024年04月24日 20:59/ 0 赞/ 72 阅读

相关如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

![图片][4771bd453eb50524b701a776732af6a3.png] 一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 PS:

╰半橙微兮°/ 2023年01月16日 02:50/ 0 赞/ 142 阅读

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

![206d25cce0979cc08e5b22727c65201b.png][] 一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 PS: 文

ゝ一纸荒年。/ 2022年11月17日 10:11/ 0 赞/ 219 阅读

相关 html两栏自适应布局,CSS 实现：两栏布局（一边固定，一边自适应）

☊【实现要求】：CSS实现左边固定，右边自适应父容器宽度的两栏布局。 √【实现】： // html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式(

浅浅的花香味﹌/ 2022年10月07日 09:52/ 0 赞/ 222 阅读

相关前端面试之两栏布局，左侧固定右侧自适应；三栏布局，左右定宽，中间自适应

左右布局：左边定宽、右边自适应， 1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上先看代码 <style> body\{margin:0;\}

Bertha 。/ 2022年06月14日 07:17/ 0 赞/ 307 阅读

相关三栏布局——左右固定，中间自适应

之前有写过关于固定父布局，然后父布局内有是两列自适应。现在我们来看看三栏布局，当左右固定，中间的布适应是如何实现的。这里将介绍两种方法，一种是使用margin值，另

Dear 丶/ 2022年06月12日 01:45/ 0 赞/ 290 阅读

相关使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类

淩亂°似流年/ 2022年06月07日 14:10/ 0 赞/ 320 阅读

相关 CSS面试：五种方式实现三栏布局（左右固定，中间自适应），以及优缺点的对比。

题目：如何实现高度200，左右宽度为300，中间自适应的三栏布局？请大家在看到这个问题时，先想一想自己能用几种方式实现这个题目？？？ 1. 浮动布局。代码如下：

怼烎@/ 2022年05月27日 06:27/ 0 赞/ 174 阅读

相关左右宽度固定中间内容自适应html布局的三种方法

牛客网的一道面试题，要求左右宽度固定中间自适应，如下图的布局方式 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

一时失言乱红尘/ 2022年01月31日 12:15/ 0 赞/ 335 阅读

相关 CSS布局 -- 左右定宽，中间自适应

左右定宽，中间自适应 ![200929295746183.png][] 有几种方法可以实现改变窗口大小看看？方案一：左右设置绝对定位，定宽，中间设置margin

分手后的思念是犯贱/ 2021年12月17日 06:34/ 0 赞/ 404 阅读