如何将固定高度的 <div> 锚定到 <td> 的右下角而不侵入上面的内容？

Question

1) 基本问题。

我知道这是一个很长的问题陈述，但请耐心等待。问题有点简单，但我需要花一点时间来为您设置。

我有一张 5x7 的表格，代表一天中的 5 个时段，每个时段有 7 个教室。 <td>s 有一个复杂的内部 HTML 结构，其中包含课程名称和教师姓名，以及填充模式对话框的课程说明和教师简介，当单击标题或名称时弹出模式对话框。

我需要在<td> 的右下角添加一个<div>（实时注册计数器），但它不会向上侵入其上方的内容。

2) 问题设置。

典型的<td> 的 HTML 如下所示。

          <td id="x0900A">                  <!-- 0900 room A -->
            <div class="classTitle"></div>
            <div class="classDescrip"></div>
            <div class="instructor"></div>
            <div class="gender"></div>
            <div class="instructorBio"></div>
            <div class="instructorImg"></div>
            <div id="x0900A-roomCount" class="roomCount">
              <div class="regis">registered</div>
              <div class="cap">capacity</div>
            </div>
          </td>

标题、讲师姓名和房间数显示在单元格中。其他<div>s 是display {hidden;}。他们的内容填充了模式对话框，点击标题或名称就会弹出。

有了这个 CSS，我可以将.roomCount 锁定在右下角。

    td {
      position: relative;
    }
    .roomCount{
      position: absolute;
      right: 0;
      bottom: 0;
      tex-align: right;
    }

但是，在某些单元格中，其文本直接紧邻其上方的讲师姓名。在其他情况下，不是。当它出现时，名称难以辨认。

表数据位于 Amazon Web Services 服务器上。使用 JavaScript，在每次加载页面时，我都会动态检索它并构建表格。

您可以在 CodePen 上的 this pen 上看到这一切。

3) 我需要一个不重构 HTML 的解决方案。

我需要防止 .roomCount 像在某些单元格中那样与讲师姓名相邻。

我不介意重构 HTML，但我愚蠢地根据 <td> 中元素的位置编写了 JavaScript。 （这是我的第一次。我能说什么？）我必须重写 JS，我也不介意这样做，但我没有时间让网站上线。

所以，我需要一个解决方案，而不需要重构 <td>s 中的 HTML 元素。

4) 有什么帮助吗？

有什么帮助吗？

非常感谢您阅读本文。对你的帮助表示感谢。事实上，如果你能解决它，我会为你擦鞋六个月。 （希望你穿运动鞋。）

Answer 1

一种残酷的hacky方法是增加讲师姓名底部填充或边距的大小。

.schedule p {
    line-height: 1.2em;
    padding: 10px 5px 0px 5px;
    margin: 0 0 25px 0;
}

不过，这会在课程标题下留出更多空间。如果您只想在讲师下使用，请将讲师 css 块更改为

.schedule p.instructor {
    margin: 0 0 25px 0;
    padding: 10px 5px 0px 5px;
    font-size: .85em;
    text-align: right;
    color: #00b8b8;
}

.instructor 规则中的 margin 和 padding 属性目前被忽略，因为 .schedule p 具有更高的特异性。

Answer 2

问题是由于内容长度不同，.classTitle 具有不同的高度。同一行中所有 td 的高度相同。当.classTitle 占用更多空间时，.roomCount 在底部留下的空间更少。对于position: absolute，它与.instructor 重叠

您可以尝试为.classTitle 和.instructor 添加固定高度。这样，您可以从.roomCount 中删除position: absolute。

.classTitle {
    padding: 5px;
    font-size: 1.05em;
    text-align: left;
    color: #00b8b8;
    height: 4em;     /* Added Sample Height */
}

.instructor {
    margin: 0 0 10px 0;
    padding: 0 3px 0 3px;
    font-size: .85em;
    text-align: right;
    color: #00b8b8;
    height: 1.2em;     /* Added Sample Height */
}

.roomCount {
    /* position: absolute; */
    /* bottom: 0; */
    /* right: 0; */
    text-align: right;
}