Question

1）基本问题。

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

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

我需要添加一个固定在<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，每次加载页面时，我都会动态检索它并构建表。

您可以在CodePen上的this pen上查看所有工作。

3）我需要一种不会重构HTML的解决方案。

我需要像在某些单元格中一样，避免.roomCount与讲师姓名相邻。

我不介意重组HTML，但是我根据<td>中元素的位置来愚蠢地编写了JavaScript。（这是我的第一次。我能说什么？）我不得不重写JS，我也不会介意这样做，但是我还没来得及将站点上线。

因此，我需要一种解决方案，而不需要重组<td>中的HTML元素。

4）有帮助吗？

有帮助吗？

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

Answer 1

一种粗暴的方法是增加教师姓名的底部填充或边距的大小。

.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;
}

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

Answer 2

此问题是由于.classTitle的高度不同而引起的，因为内容的长度不同。同一行中所有td的高度都相同。当.classTitle占用更多空间时，.roomCount的底部留有较少的空间。并且使用position: absolute，它与.instructor

重叠

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

.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;
}

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

2 个答案: