网页三栏布局五种实现方式（左中右）

本文介绍了五种不同的方法来实现高度固定、左右两栏宽度固定、中间栏自适应的网页三栏布局，重点探讨了CSS技术的应用。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
适用：高度固定左右宽度固定中间自适应
<html>

<head>
    <title>三栏布局</title>
    <meta charset="utf-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .layout article div {
            min-height: 100px;
        }
    </style>
</head>

<body>
    <section class="layout float">
        <style>
            .layout.float .left-right-center .left {
                float: left;
                width: 300px;
                background-color: blue
            }

            .layout.float .left-right-center .right {
                float: right;
                width: 300px;
                background-color: red;
            }

            .layout.float .left-right-center .center {
                overflow: auto;
            }
            .layout.float .left-right-center::after{
                content: '';
                display: block;
                clear: both;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>

            <div class="center">
                <h1>浮动解决方案：</h1>
                <p>中间宽度小会跑到下边去 用bfc</p>
            </div>
        </article>
    </section>
    <section class="layout position">
        <style>
            .layout.position {
                margin-top: 20px;
                position: relative;
            }

            .layout.position .left-right-center .left {
                top: 0;
                left: 0;
                width: 300px;
                background-color: blue;

                position: absolute;
            }

            .layout.position .left-right-center .right {
                top: 0;
                right: 0;
                width: 300px;
                background-color: red;

                position: absolute;
            }

            .layout.position .left-right-center .center {
                margin-left: 300px;
                margin-right: 300px;


            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>决对定位解决方案：</h1>
                <p>绝对定位1.左中右都是绝对定位 中间用 left right 1.左右用决对定位 中间用margin-left margin-right</p>
            </div>
        </article>
    </section>

    <section class="layout flex">
        <style>
            .layout.flex {
                margin-top: 20px;
            }

            .layout.flex .left-right-center {
                display: flex;
            }

            .layout.flex .left-right-center .left {
                flex: 0 0 300px;
                width: 300px;
                background-color: blue;
            }

            .layout.flex .left-right-center .right {
                flex: 0 0 300px;
                width: 300px;
                background-color: red;
            }

            .layout.flex .left-right-center .center {
                flex: 1;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>

            <div class="center">
                <h1>flex解决方案</h1>
                <p></p>
            </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout table">
        <style>
            .layout.table {
                margin-top: 20px;

            }

            .layout.table .left-right-center {
                display: table;
                width: 100%;
            }

            .layout.table .left-right-center>div {
                display: table-cell;
                height: 100px;
            }

            .layout.table .left-right-center .left {
                width: 300px;
                background-color: blue;
            }

            .layout.table .left-right-center .right {
                width: 300px;
                background-color: red;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>table解决方法</h1>
            </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout grid">
        <style>
            .layout.grid {
                margin-top: 20px;
            }

            .layout.grid .left-right-center {
                width: 100%;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }

            .layout.grid .left-right-center .left {
                background-color: blue;
            }

            .layout.grid .left-right-center .right {
                background-color: red;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>网格布局解决方法</h1>
            </div>
            <div class="right"></div>
        </article>
    </section>


    <div>
        总结:
        以上提供了5种实现三栏布局的方式那么他们的优缺点呢？

        <p> 1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。</p>

        <p> 2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局</p>

        <p> 3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息</p>

        <p> 4、flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上</p>

        <p> 5、grid布局很强大，但是兼容性很差。ie不支持</p>
    </div>
</body>

</html>
<!-- <script src="../js/jquery.min.js"></script> -->
<script>



</script>