一、flex布局
.parting_line {
display: flex;
width: 100%;
height: 2px;
align-items: end;
.line_left {
width: 32px;
height: 100%;
background-color: #11BDEF;
}
.line_right {
flex-grow: 1; //填充满剩余宽度
height: 1px;
background-color: #094C93;
}
}
二、Calc函数
.parting_line {
display: flex;
width: 100%;
height: 2px;
align-items: end;
.line_left {
width: 32px;
height: 100%;
background-color: #11BDEF;
}
.line_right {
width: calc(100% - 32px);
height: 1px;
background-color: #094C93;
}
}
三、绝对定位
.container {
position: relative;
}
.item {
position: absolute;
left: 0;
right: 0;
}