前端三栏布局：左右宽度固定，中间自适应常见的几种解决方式

最新推荐文章于 2022-03-30 16:15:15 发布

lcwlucky

最新推荐文章于 2022-03-30 16:15:15 发布

阅读量395

点赞数

分类专栏： html / css

本文链接：https://blog.csdn.net/A798443266/article/details/100564512

版权

html / css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方式一：浮动
方式二：定位
方式三：flex
方式四：表格布局
方式五：grid网格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局几种实现方式</title>

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        section,section div {
            height: 100px;
        }
    </style>
</head>
<body>
    <section class="way1">
        <style>
            .way1 .left {
                float: left;
                width: 300px;
                background: red;
            }
            .way1 .right {
                float: right;
                width: 300px;
                background: deepskyblue;
            }
            .way1 .center {
                background: yellow;
                margin: 0 300px;
            }
        </style>

        <div class="left"></div>
        <div class="right"></div>
        <div class="center">浮动解决方案</div>
    </section>

    <section class="way2">
        <style>
            .way2 {
                margin-top: 10px;
                position: relative;
            }
            .way2 .left {
                position: absolute;
                left: 0;
                width: 300px;
                background: red;
            }
            .way2 .right {
                position: absolute;
                right: 0;
                width: 300px;
                background: deepskyblue;
            }
            .way2 .center {
                position: absolute;
                left: 300px;
                right: 300px;
                background: yellow;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">定位解决方案</div>
    </section>

    <section class="way3">
        <style>
            .way3 {
                margin-top: 10px;
                display: flex;
            }
            .way3 .left {
                width: 300px;
                background: red;
            }
            .way3 .center {
                flex: 1;
                background: yellow;
            }
            .way3 .right {
                width: 300px;
                background: deepskyblue;
            }

        </style>
        <div class="left"></div>
        <div class="center">flex解决方案</div>
        <div class="right"></div>
    </section>

    <section class="way4">

        <style>
            .way4 {
                margin-top: 10px;
                width: 100%;
                display: table;
            }
            .way4 .left {
                width: 300px;
                display:table-cell;
                background: red;
            }
            .way4 .right {
                width: 300px;
                display:table-cell;
                background: deepskyblue;
            }
            .way4 .center {
                display:table-cell;
                background: yellow;
            }
        </style>
        <div class="left"></div>
        <div class="center">表格布局解决方案</div>
        <div class="right"></div>
    </section>

    <section class="way5">
        <style>
            .way5{
                margin-top: 10px;
                width: 100%;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
            .way5 .left {
                background: red;
            }
            .way5 .right {
                background: deepskyblue;
            }
            .way5 .center {
                background: yellow;
            }
        </style>
        <div class="left"></div>
        <div class="center">网格布局解决方案</div>
        <div class="right"></div>
    </section>
</body>
</html>

lcwlucky

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端三栏布局：左右宽度固定，中间自适应常见的几种解决方式

方式一：浮动方式二：定位方式三：flex 方式四：表格布局方式五：grid网格布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三栏布局几种实现方式</title> <style&gt...
复制链接

扫一扫