三列布局(左右固定,中间自适应)四种方式

效果图

在这里插入图片描述

一、flex弹性布局

    <style>
        .container{
            display: flex;
        }
        .left{
            /* flex:0 0 100px; 不扩展、不收缩、固定宽度100px*/
            height: 400px;
            background: rgb(148, 145, 132);
            flex:0 0 100px;
        }
        .right{
            height: 400px;
            background: rgb(148, 145, 132);
            flex:0 0 100px;
        }
        .middle{
            /* flex:auto; 等同于 flex:1 1 auto */
            background: rgb(233, 230, 232);
            flex: auto;
        }
    </style>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>

二、float浮动布局

浮动布局有两个重要的地方:

  1. HTML结构中的顺序是左侧、右侧、中间。(左中由顺序下,右侧的将会被挤到下一行)
  2. CSS样式中middle模块,要设置左右margin宽度为左右固定列宽度,否则中间模块会占据整个父容器覆盖左右固定列
    <style>
        .container{
            height: 400px;
        }
        .left{
            /*float: left;左浮动 */
            background: yellow;
            width: 100px;
            height:inherit;
            float: left;
        }
        .right{
            /* float: right;右浮动 */
            background: yellow;
            width: 100px;
            height:inherit;
            float: right;
        }
        .middle{
         /* 这里一定要设置左右边距 */
            height: inherit;
            background: yellowgreen;
            margin-left: 100px;
            margin-right: 100px;
        }
    </style>

这里一定要注意顺序是左、右、中

    <div class="container" >
        <!-- 这里注意顺序左、右、中 -->
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>

三、position定位布局

    <style>
        .container{
            /* 包裹三列的这个大容器要设置相对定位 */
            position: relative;
            height: 400px;
        }
        .left{
            width: 100px;
            height: inherit;
            background: rgb(83, 206, 34);
            position: absolute;
        }
        /* 中间绝对定位,并且留出左右固定列的宽度,否则两侧的内容会被覆盖 */
        .middle{
            height: inherit;
            background: goldenrod;
            position: absolute;
            left:100px ;
            right: 100px;
        }
        .right{
            /* 右侧绝对定位要指定距父容器右侧的宽度为0,实现靠右 */
            width: 100px;
            height: inherit;
            background: rgb(83, 206, 34);
            position: absolute;
            right: 0;
        }
    </style>
    <div class="container">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>

四、grid网格布局

    <style>
        /* grid-template-columns:200px auto 200px;
            定义网格容器的为3列,分别是200px、自动、200px
         */
        .container{
            height:400px;
            display: grid;
            grid-template-columns:200px auto 200px;
        }
        .left{
            background: rgb(248, 166, 42);
        }
        .right{
            background: rgb(248, 166, 42);
        }
        .middle{
            background: rgb(236, 229, 127);
        }
    </style>
    <div class="container">
        <div class="left">左侧固定列宽200px</div>
        <div class="middle">中间自适应</div>
        <div class="right">右侧固定列宽200px</div>
    </div>
  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值