目录
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;
}