如何实现三栏布局，左右宽度固定，中间自适应？

最新推荐文章于 2024-06-26 11:38:48 发布

XWQ_Q7

最新推荐文章于 2024-06-26 11:38:48 发布

阅读量153

点赞数

分类专栏：面试相关文章标签： html 前端

本文链接：https://blog.csdn.net/XWQ_Q7/article/details/129726915

版权

面试相关专栏收录该内容

4 篇文章 0 订阅

订阅专栏

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

总体样式设置如下：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局</title>
    <style media="screen">
        html *{
            padding: 0;
            margin: 0;
        }
        .layout{
            margin-top: 20px;
        }
        .layout article div{
            min-height: 120px;
        }
    </style>
</head>

1.利用浮动解决三栏布局问题

1.1>给左右盒子分别设置向左、向右浮动，设置宽度

1.2>中间盒子自适应

<section class="layout float">
        <style>
            .float .left{
                float: left;
                width: 300px;
                background: red;
            }
            .float .right{
                float: right;
                width: 300px;
                background: blue;
            }
            .float .center{
                background: yellow;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h2>这是浮动解决布局方案</h2>
                1.三栏布局中间部分
                2.三栏布局中间部分
                3.三栏布局中间部分
            </div>
        </article>
    </section>

2.利用定位解决三栏布局问题

2.1>给父盒子设置相对定位，设置左右padding值分别等于左右盒子宽度

2.2>给左右盒子设置绝对定位，设置宽度，分别左右定位，top值为0

2.3>中间盒子自适应，中间盒子不设置绝对定位

注：也可不给父盒子设置padding值，给中间盒子设置定位，左右分别等于左右盒子宽度

<section class="layout position">
        <!-- 设padding值的方法 -->
        <!-- <style>
            .layout.position .left-center-right{
                padding: 0 300px;
                position: relative;
            }
            .layout.position .left-center-right .left,.layout.position .right{
                position: absolute;
                top: 0;
            }
            .layout.position .left{
                left: 0;
                width: 300px;
                background: red;
            }
            .layout.position .center{
                background: yellow;
            }
            .layout.position .right{
                right: 0;
                width: 300px;
                background: blue;
            }
        </style> -->
        <!-- 设中间盒子定位的方法 -->
        <style>
            .layout.position .left-center-right div{
                position: absolute;
            }
            .layout.position .left{
                left: 0;
                width: 300px;
                background: red;
            }
            .layout.position .center{
                left: 300px;
                right: 300px;
                background: yellow;
            }
            .layout.position .right{
                right: 0;
                width: 300px;
                background: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>这是定位解决布局方案</h2>
                1.三栏布局中间部分
                2.三栏布局中间部分
                3.三栏布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>

3.通过flex-box布局解决三栏布局问题

3.1>给父盒子设置display：flex

3.2>给左右盒子分别设置宽度，中间盒子设置flex:1

<section class="layout flex">
        <style>
            .layout.flex{
                margin-top: 160px;
            }
            .layout.flex .left-center-right{
                display: flex;
            }
            .layout.flex .left{
                width: 300px;
                background: red;
            }
            .layout.flex .right{
                width: 300px;
                background: blue;
            }
            .layout.flex .center{
                flex: 1;
                background: yellow;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>这是flex布局解决三栏布局方案</h2>
                1.三栏布局中间部分
                2.三栏布局中间部分
                3.三栏布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>

4.通过表格解决三栏布局问题

4.1>给父盒子设置display：table，设置父盒子高度，宽度百分百

4.2>给所有子盒子设置display：table-cell

4.3>分别设置左右盒子的宽度

<section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 120px;
                width: 100%;
            }
            .layout.table .left-center-right div{
                display: table-cell;
            }
            .layout.table .left{
                width: 300px;
                background: red;
            }
            .layout.table .right{
                width: 300px;
                background: blue;
            }
            .layout.table .center{
                background: yellow;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>这是table表格布局解决三栏布局方案</h2>
                1.三栏布局中间部分
                2.三栏布局中间部分
                3.三栏布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>

5.通过网格布局解决三栏布局问题

5.1>给父盒子设置display：grid，宽度百分百，设置网格行高grid-template-rows，即父盒子高度，设置网格列单元格的宽度grid-template-columns:300px auto 300px(从左往右)

5.2>设置子盒子的背景颜色，方便查看

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 120px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left{
                background: red;
            }
            .layout.grid .center{
                background: yellow;
            }
            .layout.grid .right{
                background: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                <h2>这是grid网格布局解决三栏布局方案</h2>
                1.三栏布局中间部分
                2.三栏布局中间部分
                3.三栏布局中间部分
            </div>
            <div class="right"></div>
        </article>
    </section>