javascript - 如何在不干扰上方内容的情况下将固定高度的 <div> 锚定到 <td> 的右下角？

Question

1) 基本问题。

我知道这是一个很长的问题陈述，但请耐心等待。这个问题有点简单，但我需要一些时间才能为您解决。

我有一张 5x7 的 table ，代表一天中的 5 个时间段，每个时间段有 7 个教室。 <td> s 有一个复杂的内部 HTML 结构，其中包含类(class)标题和讲师姓名，以及类(class)描述和讲师简介，这些内容填充了单击标题或姓名时弹出的模态对话框。

我需要添加一个 <div> (实时注册柜台)锚定到 <td>的右下角，不会向上侵入其上方的内容。

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>是 display {hidden;} .他们的内容填充了在点击标题或名称时弹出的模态对话框。

使用这个 CSS，我可以锁定 .roomCount在右下角。

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

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

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

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

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

我需要保留 .roomCount避免像在某些单元格中那样紧靠讲师姓名。

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

因此，我需要一个无需重构 <td> 中的 HTML 元素的解决方案

4) 有什么帮助吗？

有什么帮助吗？

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

Answer 1

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

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

不过，这将为类(class)标题留出更多空间。如果您只想在讲师下使用它，请将讲师 css block 更改为

.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 有更高的特异性。