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

好的，你的问题是如何实现这个布局吗？如果是这样，可以使用以下 CSS 代码实现：

.parent {
  height: 117px;
  position: relative;
}

.child {
  position: absolute;
  height: 20px;
  width: 100%;
  top: 18px;
}

.top {
  background-color: red;
}

.middle {
  background-color: green;
  top: 58px; /* 20px + 18px + 20px = 58px */
}

.bottom {
  background-color: blue;
  top: 98px; /* 20px + 18px + 20px + 18px = 98px */
}

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

相关问题

一个高为117px的长方形的div盒子 上中下 分为三份小的div 他们的上边距为18px

好的，你可以使用绝对定位来实现这个效果。具体来说，你可以将长方形的div盒子设置为相对定位，并将三个小的div都设置为绝对定位。然后，将它们的上边距设置为18px，并使用top属性将它们分别定位在长方形盒子的上、中、下位置。下面是一个示例代码：

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

.container {
  position: relative; /* 设置长方形盒子为相对定位 */
  height: 117px; /* 设置盒子高度 */
}

.top, .middle, .bottom {
  position: absolute; /* 设置三个小的div为绝对定位 */
  left: 0; /* 将它们定位到盒子的左侧 */
  right: 0; /* 将它们定位到盒子的右侧 */
  height: calc((117px - 2 * 18px) / 3); /* 计算每个小的div的高度 */
  margin-top: 18px; /* 设置每个小的div的上边距为18px */
}

.top {
  top: 0; /* 将第一个小的div定位到盒子的顶部 */
  background-color: red;
}

.middle {
  top: calc((117px - 2 * 18px) / 3 + 18px); /* 将第二个小的div定位到盒子的中间位置 */
  background-color: green;
}

.bottom {
  bottom: 0; /* 将第三个小的div定位到盒子的底部 */
  background-color: blue;
}

这样，你就可以将长方形的div盒子分为上中下三个部分，并且它们的高度相等，并且它们的上边距都为18px。

一个高为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` 的分布。