CSS | 实现三列布局(两边边定宽 中间自适应,自适应成比)

目录

[示例1 (中间自适应](#示例1 (中间自适应)

示例2(中间自适应

示例3(中间自适应

[示例4 (自适应成比](#示例4 (自适应成比)

示例5(左中定宽,右边自适应

示例6(中间自适应

示例7(中间自适应

示例8(中间定宽,两边自适应


css实现两栏:CSS | CSS实现两栏布局(左边定宽 右边自适应,左右成比自适应)-CSDN博客

javascript 复制代码
<div class="father">
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
  <div class="box3">盒子3</div>
</div>

注意:示例没有设置高度,由文字支撑

示例1 (中间自适应

压缩过程




javascript 复制代码
 .father{
      margin: 20px;
      padding: 0;
  }
  .box1,.box2{
      width: 300px;
      background-color:rebeccapurple;
  }
  .box1{
      float: left;
  }
  .box2{
      float: right;
  }
  .box3{
      background-color: rgb(216, 252, 216);
     /* 减去两边盒子宽度 */
      width: calc(100%-600px);

  }

示例2(中间自适应



javascript 复制代码
    .father{
        width: 100%;
    }
    .box1{
        width:300px;
        background-color: rebeccapurple;
        float: left;
    }
    .box2{
        width: calc(100% - 600px);
        background-color: rgb(216, 252, 216);

        float: left;
    }
    .box3{
        width: 300px;

        background-color: rebeccapurple;
        float: left;
    }

示例3(中间自适应




javascript 复制代码
.box1{
        width: 300px;
        background-color:rebeccapurple;

        display: inline-block;
    }
    .box2{

        width: calc(100% - 600px);
        background-color:  rgb(216, 252, 216);
        display: inline-block;
    }
    .box3{
        width: 300px;
        background-color: rebeccapurple;
        display: inline-block;
    } 

示例4 (自适应成比

flex: 1;放大且缩小并等分所有空间

javascript 复制代码
  .father{
        display: flex;

    }
    .box1{
        background-color: rebeccapurple;
        /* flex:1 === flex: 1 1 0px */
        /* 当flex为1时,占满剩余宽度的一份(一份是多少取决于总宽度-固定宽度之和/几份*所占份数) */
        flex: 1;
    }
    .box2{
        background-color: rgb(216, 252, 216);
        flex: 1;
    }
    .box3{
        background-color: rebeccapurple;
        flex: 1;
    }

示例5(左中定宽,右边自适应

注意:该盒子定宽后也会随父盒子挤压而变小

javascript 复制代码
 .father{
        display: flex;

    }
    .box1{
        width: 100px;
        background-color: rebeccapurple;

    }
    .box2{
        width: 100px;
        background-color: rgb(216, 252, 216);
    }
    .box3{
        flex: 1;
        background-color: rebeccapurple;

    }

示例6(中间自适应






javascript 复制代码
 .box1 {
  float: left;
  width: 200px;
  background-color: rebeccapurple;
}
.box2 {
  width: 200px;
  background-color: rgb(216, 252, 216);
  float: right;
}
.box3 {
  margin-left: 200px;
  margin-right: 200px;
  background-color: green;
}

示例7(中间自适应


javascript 复制代码
  .father {
  display: table;
}
.box1 {
  width: 200px;
  display: table-cell;
  background-color: red;
}
.box2 {
  display: table-cell;
  background-color: blue;
}
.box3 {
  display: table-cell;
  width: 200px;
  background-color: green;
}

示例8(中间定宽,两边自适应


javascript 复制代码
    .father{
        display: flex;

    }
    .box1{
        background-color: rebeccapurple;

        flex: 1;
    }
    .box2{
        background-color: rgb(216, 252, 216);
        /* flex: 1; */
        width: 300px;
    }
    .box3{
        background-color: rebeccapurple;
        flex: 1;
    }

示例9(中间自适应

左右定宽也会被等比缩小,因为flex: 1;放大且缩小并等分所有空间


javascript 复制代码
 .father{
        display: flex;

    }
    .box1{
        background-color: rebeccapurple;

        width: 300px;
    }
    .box2{
        background-color: rgb(216, 252, 216);
        flex: 1;

    }
    .box3{
        background-color: rebeccapurple;
        width: 300px;
    }
相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
软件2059 小时前
【vue3主题切换】
vue
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互