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

  • 方式一:浮动
  • 方式二:定位
  • 方式三: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>

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

上一篇:AJAX 练习篇


下一篇:元素在其父元素垂直水平都居中的方法