如何用CSS实现中间自适应，两边定宽三栏布局

时间：2018-08-12 15:33:48 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：auto alt 技术分享 red 浮动布局方案问题 info

1.前言

用css实现“两边定宽，中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了，一般当面试者写出一种实现方法之后，面试官还会问你还有没有别的方法，尽量多的写出几种实现方法。

2.实现原理

要想实现这种“两边定宽，中间自适应的三栏布局”其实也不难，无外乎把握住以下几点：

要想中间自适应，那么中间的div不能设置宽度width，这样宽度就会随着浏览器窗口自适应。
由于div是块级元素，要想三个div处于同一行，那么两边的div就要脱离文档流。
CSS3的flex伸缩布局。
表格table布局。
网格布局。

3.具体实现

下面就按照上面所说的实现原理，列举以下几种实现方式：

3.1 浮动解决方案

<style>
        .layout-float .right{
            float: right;
            width: 300px;
            height: 100px;
            background-color: red;
        }
        .layout-float .left{
            float: left;
            width: 300px;
            height: 100px;
            background-color: blue;
        }
        .layout-float .center{
            height: 100px;
            background-color: yellow;
        }
</style>
<div class="right"></div>
<div class="left"></div>
<div class="center"><h1>浮动解决方案</h1></div>

3.2 绝对定位解决方案

<style>
        .layout-absolute .right{
            width: 300px;
            height: 100px;
            right: 0px;
            position: absolute;
            background-color: red;
        }
        .layout-absolute .left{
            width: 300px;
            height: 100px;
            left: 0px;
            position: absolute;
            background-color: blue;
        }
        .layout-absolute .center{
            left: 300px;
            right: 300px;
            height: 100px;
            position: absolute;
            background-color: yellow;
        }
</style>
<div class="left"></div>
<div class="center"><h1>绝对定位解决方案</h1></div>
<div class="right"></div>

3.3 Flex伸缩布局解决方案

<style>
        .layout-flex .left-center-right{
            display: flex;
        }
        .layout-flex  .left-center-right .left{
            width: 300px;
            height: 100px;
            background-color: blue;
        }
        .layout-flex  .left-center-right .center{
            flex: 1;
            background-color: yellow;
        }
        .layout-flex  .left-center-right .right{
            width: 300px;
            height: 100px;
            background-color: red;
        }
</style>
<div class="left-center-right">
    <div class="left"></div>
    <div class="center"><h1>Flex伸缩布局解决方案</h1></div>
    <div class="right"></div>
</div>

3.4 表格布局解决方案

<style>
        .layout-table .left-center-right{
            width: 100%;
            display: table;
            height: 100px;
        }
        .layout-table .left-center-right>div{
            display: table-cell;
        }
        .layout-table .right{
            width: 300px;
            height: 100px;
            background-color: red;
        }
        .layout-table .left{
            width: 300px;
            height: 100px;
            background-color: blue;
        }
        .layout-table .center{
            height: 100px;
            background-color: yellow;
        }
</style>
<div class="left-center-right">
    <div class="left"></div>
    <div class="center"><h1>表格布局解决方案</h1></div>
    <div class="right"></div>
</div>

3.5 网格布局解决方案

<style>
        .layout-grid .left-center-right{
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
        .layout-grid .right{
            background-color: red;
        }
        .layout-grid .left{
            background-color: blue;
        }
        .layout-grid .center{
            background-color: yellow;
        }
</style>
<div class="left-center-right">
    <div class="left"></div>
    <div class="center"><h1>网格布局解决方案</h1></div>
    <div class="right"></div>
</div>

4. 效果图

技术分享图片

（完）

如何用CSS实现中间自适应，两边定宽三栏布局

标签：auto alt 技术分享 red 浮动布局方案问题 info

原文地址：https://www.cnblogs.com/wangjiachen666/p/9462858.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行