网页设计手法之“左边宽度固定，右边宽度自适应”

设计场景

---

• 左右两列布局，左边宽度固定，右边宽度自适应

老式解决方案

---

• 结构

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