html 自动填充宽度,DIV_CSS布局问题：3个水平对齐布局的DIV，左右固定宽，中间宽度自动填充_html/css_WEB-ITnose...

你可以使用 flex 布局来实现这个布局，具体实现如下：

HTML 代码：

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

CSS 代码：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left, .right {
  width: 100px;
  height: 100px;
}

.middle {
  flex: 1;
  height: 100px;
}

通过设置 container 的 display 为 flex，可以使其内部的子元素变为 flex 项目，从而实现水平对齐。justify-content: space-between 可以让左右两个子元素分别靠左、靠右，中间的子元素自动填充宽度。align-items: center 可以让三个子元素在垂直方向上居中对齐。左右两个子元素的宽度为 100px，中间的子元素使用 flex: 1 来自动填充宽度。