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

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

news 2025/7/7 6:52:13

示例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;}