設(shè)計(jì)場景
- 左右兩列布局昆禽，左邊寬度固定，右邊寬度自適應(yīng)
老式解決方案
<div class="col-md-resize">
<div class="col-md-side"></div>
<div class="col-md-main"></div>
</div>
.col-md-resize {
position: relative;
padding-left: 220px;
}
.col-md-side {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 200px;
border: 1px solid #e5e5e5;
}
.col-md-main {
border: 1px solid #e5e5e5;
}
新式解決方案
<div class="col-md-resize">
<div class="col-md-side"></div>
<div class="col-md-main"></div>
</div>
.col-md-resize {
display: flex;
}
.col-md-side {
width: 200px;
margin-right: 20px;
}
.col-md-main {
flex: 1;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
