css实现三栏布局（5种方案）

最新推荐文章于 2024-04-26 14:57:51 发布

雨水芬纷

最新推荐文章于 2024-04-26 14:57:51 发布

阅读量863

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/u014773932/article/details/121286907

版权

前端专栏收录该内容

53 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css实现三栏布局</title>
    <!-- 五种方案：
    1. 浮动布局
        优点 : 浮动布局兼容性好
        缺点 : 大部分业务场景下无缺点
    2. table 布局
        优点 : 兼容性好
        缺点 : table 布局很落后目前基本被放弃
    3. 定位布局
        优点 : 使用简单
        缺点 : 大部分业务场景下无缺点。
    4. flex 布局
        优点 : 上手成本低
        缺点 : PC 端仅支持 IE9 以上浏览器
    5. gird 布局
        优点 : 简单 , 仅两行关键代码。
        缺点 : 兼容性差 -->
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        div {
            height: 100px;
        }
        .box {
            width: 100%;
        }
        .left{
            width: 100px;
            background: red;
        }
        .center{
            background: green;
        }
        .right{
            width: 100px;
            background: blue;
        }
        
        /* <!-- 第一种：浮动布局  --> */
        .box-float .left {
            float: left;
        }
        .box-float .center {
            margin-left: 100px;
            margin-right: 100px;
        }
        .box-float .right {
            float: right;
        }

        /* <!-- 第二种：table布局  --> */
        .box-table{
            display: table;
        }
        .box-table div{
            display: table-cell;
        }

        /* <!-- 第三种：定位布局  --> */
        .box-position{
            position: relative;
        }
        .box-position .left{
            position: absolute;
            left: 0;
        }
        .box-position .center{
            position: absolute;
            left: 100px;
            right: 100px;
        }
        .box-position .right{
            position: absolute;
            right: 0;
        }

        /* <!-- 第四种：flex 布局  --> */
        .box-flex{
            display: flex;
        }
        .box-flex .center{
            flex: 1;
        }

        /* <!-- 第五种：grid 布局  --> */
        .box-grid{
            display: grid;
            grid-template-columns: 100px 1fr 100px;
        }
    </style>
</head>

<body>
    <!-- 第一种：浮动布局  -->
    <p>第一种：浮动布局</p> 
    <!-- left.center.right正常布局会塌陷
         left.right.center就会正常
        浏览器解析HTML文档是从上到下按顺序解析的，你原来的代码right本来就是一个block，设置右浮动不会对它前面的center有影响 -->
    <div class="box box-float">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>
    <br>

    <!-- 第二种：table布局  -->
    <p>第二种：table布局</p> 
    <div class="box box-table">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <br>

    <!-- 第三种：定位布局  -->
    <p>第三种：定位布局</p> 
    <div class="box box-position">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <br>

    <!-- 第四种：flex 布局  -->
    <p>第四种：flex布局</p> 
    <div class="box box-flex">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <br>

    <!-- 第五种：grid 布局  -->
    <p>第五种：grid 布局</p> 
    <div class="box box-grid">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <br>

</body>

</html>

雨水芬纷

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现三栏布局（5种方案）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css实现三栏布局</title> <!-- 五种方案： 1. 浮动布局优点 .
复制链接

扫一扫