一个高为117px的长方形的div盒子 分为高为20px三份小的div

好的，可以使用以下 HTML 和 CSS 代码实现这个布局：

HTML代码：

<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS代码：

.container {
  height: 117px;
  border: 1px solid #000; /* 方便观察 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child {
  height: 20px;
  background-color: gray;
}

其中，`container` 是包含三个小 `div` 的父元素，`child` 表示三个小 `div`。通过设置 `display: flex` 和 `flex-direction: column` 可以让三个小的 `div` 沿垂直方向排列。通过设置 `justify-content: space-between` 可以让三个小的 `div` 之间的距离平均分配，实现了上中下三个小 `div` 的分布。