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;
    }
相关推荐
百思可瑞教育10 分钟前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo14 分钟前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
沐墨专攻技术15 分钟前
二、网页的“化妆师”:从零学习 CSS
css·笔记·学习
yinuo18 分钟前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
GISer_Jing1 小时前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登1 小时前
【Webpack】模块联邦
前端·webpack·node.js
前端码虫1 小时前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
Bottle4142 小时前
深入探究 React Fiber(译文)
前端
汤姆Tom2 小时前
JavaScript Proxy 对象详解与应用
前端·javascript
BillKu2 小时前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3