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;
    }
相关推荐
clownAdam21 分钟前
Chrome性能优化秘籍
前端·chrome·性能优化
@Kerry~25 分钟前
phpstudy .htaccess 文件内容
java·开发语言·前端
nueroamazing35 分钟前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
Orange_sparkle2 小时前
若依使用基本步骤
java·vue
WebDesign_Mu2 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
@PHARAOH2 小时前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了2 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER2 小时前
Web 开发 30
前端·笔记·后端·学习·web
Jonathan Star2 小时前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端2 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html