CSS 左右两边定宽，中间⾃适应

问题

CSS 左右两边定宽，中间⾃适应

左右两边定宽，中间⾃适应：float，float + calc, 圣杯布局（设置BFC，margin负值法），flex

答案

.wrap {
    width: 100%;
    height: 200px;
}
.wrap > div {
    height: 100%;
}
/* ⽅案1 */
.left {
    width: 120px;
    float: left;
}
.right {
    float: right;
    width: 120px;
}
.center {
    margin: 0 120px;
}
/* ⽅案2 */
.left {
    width: 120px;
    float: left;
}
.right {
    float: right;
    width: 120px;
}
.center {
    width: calc(100% - 240px);
    margin-left: 120px;
}
/* ⽅案3 */
.wrap {
    display: flex;
}
.left {
    width: 120px;
}
.right {
    width: 120px;
}
.center {
    flex: 1;
}

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！