html三个盒子左中右布局

可以使用 CSS 的 flexbox 布局实现三个盒子的左中右布局。下面是一个示例代码：

HTML：

<div class="container">
  <div class="left-box"></div>
  <div class="middle-box"></div>
  <div class="right-box"></div>
</div>

CSS：

.container {
  display: flex;
}

.left-box {
  flex: 1;
  background-color: red;
}

.middle-box {
  flex: 2;
  background-color: green;
}

.right-box {
  flex: 1;
  background-color: blue;
}

在上面的示例中，`.container` 是一个 flex 容器，三个子盒子 `.left-box`、`.middle-box` 和 `.right-box` 的 `flex` 属性分别设置为 `1`、`2` 和 `1`，表示它们在水平方向上的占比比例。这样就可以实现左中右布局的效果。