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;
    }
相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue