前端css实现左侧盒子宽度固定，右侧宽度自适应布局

要实现左侧盒子宽度固定，右侧宽度自适应的布局，可以使用CSS的浮动（float）或者flexbox布局。以下是两种方法的示例代码：

使用浮动（float）的方法：

HTML:

<div class="container">
    <div class="left">左侧固定宽度</div>
    <div class="right">右侧自适应宽度</div>
</div>

CSS:

.container {
    overflow: hidden; /* 清除浮动 */
}
.left {
    float: left;
    width: 200px; /* 左侧宽度 */
    background: #f00; /* 红色背景 */
}
.right {
    margin-left: 200px; /* 左侧盒子宽度的补白 */
    background: #0f0; /* 绿色背景 */
}

使用flexbox布局的方法：

HTML:

<div class="container">
    <div class="left">左侧固定宽度</div>
    <div class="right">右侧自适应宽度</div>
</div>

CSS:

.container {
    display: flex;
}
.left {
    width: 200px; /* 左侧宽度 */
    background: #f00; /* 红色背景 */
}
.right {
    flex-grow: 1; /* 右侧盒子的flex增长量为1，自适应宽度 */
    background: #0f0; /* 绿色背景 */
}

两种方法都可以实现你需要的效果，flexbox布局相对于浮动来说更加灵活，可以更好地处理布局中的各种问题。