美文网首页
左固定 右侧自适应

左固定 右侧自适应

作者: 看到这朵小fa了么 | 来源:发表于2020-03-31 10:34 被阅读0次
       .left {
            float: left;
            width: 200px;
            background-color: aquamarine;
        }

        .right {
            float: left;
            width: calc(100% - 200px);
            background-color: rgb(238, 199, 228);
        }
       .left2 {
            float: left;
            width: 200px;
            background-color: aquamarine;
        }

        .right2 {
            margin-left: 200px; // padding-left: 200px;
            background-color: rgb(238, 199, 228);
        }
       .contain3 {
            display: flex;
            flex-direction: row;
        }

        .left3 {
            width: 200px;
            background-color: aquamarine;
        }

        .right3 {
            width: 100%; /* width: calc(100% + 200px); */
            background-color: rgb(238, 199, 228);
        }

注意: flex 子项目默认shrink:1; 空间不足将缩小

相关文章

  • 左固定 右侧自适应

    注意: flex 子项目默认shrink:1; 空间不足将缩小

  • CSS自适应布局

    今天小编介绍自适应布局实现方法的demo,1)左侧固定宽度,右侧自适应,随着窗口的宽度而变化;2)右侧固定宽度,左...

  • 常见网页布局的介绍

    左侧固定,右侧自适应 右侧固定,左侧自适应 圣杯布局(左右固定,中间自适应) 中间固定 两侧自适应 等分布局 等分...

  • 常用网页布局

    一、多列布局 (1) 宽度自适应布局 两栏布局 左侧固定右侧自适应 右侧固定左侧自适应 技术原理(左侧固定右侧自适...

  • 多列布局方案

    两栏布局 左侧固定右侧自适应 右侧固定左侧自适应 技术原理(左侧固定右侧自适应) 结构上左右两个盒子,左侧设置为固...

  • 两栏布局和三栏布局

    两栏布局 1、左侧固定宽度,右侧自适应 方法一: 左侧设置float:left,右侧设置margin-left为左...

  • 双栏式布局

    页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应。总之就是一边固定宽度,一边自适应...

  • 2019-04-01常见布局汇总(flex版本)

    1,左侧固定中间自适应 2,右侧固定,左侧自适应 3,两边固定中间自适应 4,等高布局

  • 面试相关

    一.实现左侧固定,右侧自适应的方法 基本样式html css 1.使用float+margin-left 实现:左...

  • 双飞翼布局 (三列布局)

    左右侧都是固定 中间自适应

网友评论

      本文标题:左固定 右侧自适应

      本文链接:https://www.haomeiwen.com/subject/fcoiuhtx.html