哪里有免费的网站域名百度下载安装2021最新版
目录
示例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;}