如何将这些 div 定位在 td 中？

Question

我在元素定位方面遇到问题。我想要的是这样的：

在 td 的顶部有一个 div，里面有一些 div，在 td 的底部有一个 div。使用我的代码，它适用于 Chrome、IE11 和 Opera，但不适用于 Firefox 和 IE9。在这些浏览器中，它的显示效果不佳：

如您所见，第 7 天的事件与第 14 天重叠。例如，它应该显示为 13th。一开始以为是火狐的float bug，现在觉得不是。

.td {
  position: relative;
  vertical-align: top;
  font-size: 13px;
  border: 1px solid #F2F2F2;
}

.top-div {
  height: 85%;
}

.divs-inside-top-div {
  display: block;
  padding-top: 2px;
  padding-bottom: 2px;
}

.bottom-div {
  width: 100%;
  background-color: #FE9A2E;
}

<td>
    <div class="top-div">
        <div class="divs-inside-top-div"></div>
        <div class="divs-inside-top-div"></div>
        <div class="divs-inside-top-div"></div>
    </div>
    <div class="bottom-div"></div>
</td>

我试图明确：在所有元素中都可以，但没有效果。

谁能告诉我如何在 Firefox 中正确显示？

编辑：

这就是我在 chrome 中看到它的方式，例如：

Answer 1

我想知道这是否会给您带来您想要实现的目标？

min-heights 是因为它们需要一些内容才能显示。如果你需要底部和顶部 div 之间的空间，那么你必须给 td 一个高度和绝对位置底部 div。

td {
  position: relative;
  vertical-align: top;
  font-size: 13px;
  border: 1px solid #F2F2F2;
  width: 100px;
}

.top-div {
}

.divs-inside-top-div {
  padding-top: 2px;
  padding-bottom: 2px;
  min-height: 20px;
}
.divs-inside-top-div:nth-child(1) {
  background-color: #CCCCCC;
}
.divs-inside-top-div:nth-child(2) {
  background-color: #AAAAAA;
}
.divs-inside-top-div:nth-child(3) {
  background-color: #999999;
}

.bottom-div {
  background-color: #FE9A2E;
  min-height: 20px;
}

<table>
  <tr>
    <td>
      <div class="top-div">
        <div class="divs-inside-top-div"></div>
        <div class="divs-inside-top-div"></div>
        <div class="divs-inside-top-div"></div>
      </div>
      <div class="bottom-div"></div>
    </td>
  </tr>
</table>