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

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

HTML代码：

<div class="container">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

CSS代码：

.container {
  height: 117px;
  border: 1px solid #000; /* 方便观察 */
  position: relative;
}

.container div {
  height: 20px;
  position: absolute;
  width: 100%;
  top: 0;
}

.top {
  background-color: red;
  top: 0;
}

.middle {
  background-color: green;
  top: 20px;
}

.bottom {
  background-color: blue;
  bottom: 0;
}

其中，`container` 是包含三个小 `div` 的父元素，`top`、`middle`、`bottom` 表示三个小 `div`。通过设置 `position: absolute` 可以让三个小的 `div` 相对于 `container` 定位。`top`、`middle`、`bottom` 分别设置了不同的 `top` 和 `bottom` 值实现了上中下三个小 `div` 的分布。