常见的两列，三列布局的几种实现方式_table一行分两列,一行分三列-优快云博客

本文链接：https://blog.youkuaiyun.com/CWH0908/article/details/100069436
本文详细介绍了五种网页布局技术，包括浮动布局、绝对定位、弹性布局、表格布局和网格布局，探讨了它们的优点、缺点及适用场景，帮助读者掌握不同布局方法的特点。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }
        
        body>article {
            margin-top: 20px;
        }
        /* float实现三列布局 
            优点：兼容性好
            缺点：需要处理清除浮动问题（浮动脱离文档流）
        */
        
        .leftBar1 {
            float: left;
            background-color: red;
            width: 300px;
            height: 100px;
        }
        
        .rightBar1 {
            float: right;
            background-color: blue;
            width: 300px;
            height: 100px;
        }
        
        .centerBar1 {
            height: 100px;
            background-color: yellow;
        }
        /* 绝对定位实现三列布局
            优点：快捷，不容易出现问题
            缺点：脱离文档流
         */
        
        .container2 {
            position: relative;
            height: 100px;
        }
        
        .leftBar2 {
            position: absolute;
            left: 0;
            background-color: red;
            width: 300px;
            height: 100px;
        }
        
        .rightBar2 {
            position: absolute;
            right: 0;
            background-color: blue;
            width: 300px;
            height: 100px;
        }
        
        .centerBar2 {
            position: absolute;
            left: 300px;
            right: 300px;
            height: 100px;
            background-color: yellow;
        }
        /* 弹性布局实现三列布局 
            优点：方便快捷，不会脱离文档流，且移动端大多数时使用flex布局
            缺点：ie8及以下不兼容
        
        */
        
        .container3 {
            display: flex;
        }
        
        .leftBar3 {
            background-color: red;
            width: 300px;
            height: 100px;
        }
        
        .rightBar3 {
            background-color: blue;
            width: 300px;
            height: 100px;
        }
        
        .centerBar3 {
            flex: 1;
            height: 100px;
            background-color: yellow;
        }
        /* 表格布局 
            优点：兼容性好，支持ie8
            缺点：操作table较为繁琐，维护性较差
        */
        
        .container4 {
            width: 100%;
            /* 每个单元格的高度 */
            height: 100px;
            display: table;
        }
        
        .container4>div {
            /* 表格下每个div 表现为 单元格 形式 */
            display: table-cell;
        }
        
        .leftBar4 {
            background-color: red;
            width: 300px;
        }
        
        .rightBar4 {
            background-color: blue;
            width: 300px;
        }
        
        .centerBar4 {
            background-color: yellow;
        }
        /* 网格布局 
            优点：新方案，方便快捷
            缺点：兼容性差，旧版本浏览器不支持
        */
        
        .container5 {
            width: 100%;
            display: grid;
            /* 网格高度 */
            grid-template-rows: 100px;
            /*每列宽度 */
            grid-template-columns: 300px auto 300px;
        }
        
        .leftBar5 {
            background-color: red;
        }
        
        .rightBar5 {
            background-color: blue;
        }
        
        .centerBar5 {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <h4>题目：假设高度已知为100px,实现三栏布局，左板块和右板块为100px，中间板块自适应</h4>
    <article class="container1">
        <div class="leftBar1"></div>
        <div class="rightBar1"></div>
        <div class="centerBar1">使用浮动实现三列布局，中间自适应</div>
    </article>

    <article class="container2">
        <div class="leftBar2"></div>
        <div class="centerBar2">使用绝对定位实现三列布局，中间自适应</div>
        <div class="rightBar2"></div>
    </article>

    <article class="container3">
        <div class="leftBar3"></div>
        <div class="centerBar3">使用弹性布局实现三列布局，中间自适应，允许高度自适应</div>
        <div class="rightBar3"></div>
    </article>

    <article class="container4">
        <div class="leftBar4"></div>
        <div class="centerBar4">表格布局实现三列布局，中间自适应，允许高度自适应</div>
        <div class="rightBar4"></div>
    </article>

    <article class="container5">
        <div class="leftBar5"></div>
        <div class="centerBar5">网格布局实现三列布局，中间自适应</div>
        <div class="rightBar5"></div>
    </article>

    <h4>两栏布局，假设高度已知为100px，左板块固定100px，右板块自适应</h4>
    <article>
        <style>
            .container1 {
                position: relative;
                /* 脱离文档流，需要自行添加高度 */
                height: 100px;
            }
            
            .container1 .left {
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                background-color: red;
            }
            
            .container1 .right {
                position: absolute;
                left: 100px;
                right: 0;
                height: 100px;
                background-color: blue;
            }
        </style>
        <div class="container1">
            <div class="left"></div>
            <div class="right">绝对定位实现两栏布局，右板块自适应</div>
        </div>
    </article>

    <article>
        <style>
            .container2 {
                display: flex;
            }
            
            .container2 .left {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            
            .container2 .right {
                flex: 1;
                height: 100px;
                background-color: blue;
            }
        </style>
        <div class="container2">
            <div class="left"></div>
            <div class="right">flex布局实现两栏布局，右板块自适应</div>
        </div>
    </article>

    <article>
        <style>
            .container3 {}
            
            .container3 .left {
                float: left;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            
            .container3 .right {
                height: 100px;
                background-color: blue;
            }
        </style>
        <div class="container3">
            <div class="left"></div>
            <div class="right">float实现两栏布局，右板块自适应</div>
        </div>
    </article>
</body>

</html>