当前位置：首页 > article >正文

CSS | 实现三列布局（两边边定宽中间自适应，自适应成比）

article 2025/1/16 2:26:02

示例1 （中间自适应

示例2（中间自适应

示例3（中间自适应

示例4 （自适应成比

示例5（左中定宽，右边自适应

示例6（中间自适应

示例7（中间自适应

示例8（中间定宽，两边自适应

css实现两栏：CSS | CSS实现两栏布局（左边定宽右边自适应，左右成比自适应）-CSDN博客

<div class="father">
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
  <div class="box3">盒子3</div>
</div>

注意：示例没有设置高度，由文字支撑

示例1 （中间自适应

压缩过程

 .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（中间自适应

    .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（中间自适应

.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;放大且缩小并等分所有空间

  .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（左中定宽，右边自适应

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

 .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（中间自适应

 .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（中间自适应

  .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（中间定宽，两边自适应

    .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;放大且缩小并等分所有空间

 .father{
        display: flex;

    }
    .box1{
        background-color: rebeccapurple;

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

    }
    .box3{
        background-color: rebeccapurple;
        width: 300px;
    }