css⽗元素⾼度不固定，⼦元素⾼度100%需求：实现两栏布局，其中⼀栏宽度固定，另⼀栏宽度⾃适应，每⼀栏⾼度随着内容⾃动撑开。
// li的样式
li{
position: relative;
min-height: 48px;
font-size: 14px;
line-height: 1.7;
color: rgba(0, 0, 0, 0.8);
}
// label的样式
.label{css布局左边固定右边自适应
position: absolute;
height: 100%;
width: 120px;
background: #f6f6f6;
border: 1px solid #eaeaea;
border-top: none;
padding-left: 12px;
display: flex;
align-items: center;
}
// value的样式
.value{
height: 100%;
border: 1px solid #eaeaea;
padding: 12px 19px;
border-left: none;
border-top: none;
margin-left: 120px; // margin的值是label的宽度
}
总结：
⽗元素⾼度不固定，⼦元素⾼度100%
⽗元素：position: relative;
⼦元素：position: absolute ；height: 100%;
两栏布局：⼀栏固定，另⼀栏宽度⾃适应
margin的值是固定那栏的宽度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。