html/css:在一个父容器div中存在三个子容器div，三个子容器的class分别为1，2，3，接下来对三个子容器div进行css设置，使得它们在父容器中水平排开，1居左，2居中，3居右，且三个子容器div之间需要存在随着父容器大小变化而变化的间隔

在HTML和CSS中，你可以通过组合`display`, `float` 和 `margin`属性来实现这个布局。首先，在HTML部分：

<div class="parent-container">
  <div class="child-container child-1">1</div>
  <div class="child-container child-2">2</div>
  <div class="child-container child-3">3</div>
</div>

然后，在CSS部分，给`.parent-container`、`.child-container`以及分别针对每个子类的样式添加如下规则：

.parent-container {
  display: flex; /* 创建一个弹性盒模型 */
  justify-content: space-between; /* 子元素均匀分布在主轴上，子元素之间的间距会随父容器变化 */
}

.child-container {
  float: left; /* 使子元素水平排列 */
  width: calc(33.33% - 20px); /* 假设你想让子元素占据父容器宽度的三分之一，并留出20px的间隔 */
  box-sizing: border-box; /* 包含边框和内填充在内的计算 */
}

.child-1 {
  margin-right: 20px; /* 1号子元素右侧留出间隔 */
}

.child-3 {
  margin-left: 20px; /* 3号子元素左侧留出间隔 */
}

这里假设了20px作为默认间隔，如果需要根据父容器的实际宽度动态调整，可以考虑使用JavaScript或者媒体查询配合窗口的`resize`事件。