height: 50px;
background-color: #FF5053;
}
.right {
margin-left: 100px; /* margin */
height: 50px;
background-color: #0062CC;
}
使用flex实现
.parent {
display: flex;
width: 400px;
height: 400px;
background-color: #007AFF;
}
.left {
flex: 1;
background-color: #2AC845;
}
.right {
width: 100px;
background-color: #8A6DE9
}
使用table实现
.parent {
display: table;
table-layout: fixed;
width: 280px;
height: 200px;
background-color: #0062CC;
}
.left {
display: table-cell;
width: 50px;
}
.right {
width: 100px;
display: table-cell;
background-color: #8A6DE9
}
两列定宽,一列自适应
基本html结构为父容器为parent,自容器为left,cent