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

最新推荐文章于 2025-05-15 17:23:59 发布

程序员通通

最新推荐文章于 2025-05-15 17:23:59 发布

阅读量685

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：布局 css 面试

本文链接：https://blog.youkuaiyun.com/AC_greener/article/details/79923634

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍五种实现特定高度200px、左右固定宽度300px、中间自适应宽度的三栏布局的方法，包括浮动布局、绝对定位、Flex布局、表格布局和Grid布局，并提供每种方法的详细代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

浮动布局。代码如下：

    <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>

效果图：这里写图片描述
这里要注意的是，不要把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>

效果图：这里写图片描述
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>

效果图：这里写图片描述
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>

效果图：这里写图片描述
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>

效果图：这里写图片描述