我需要在表格单元格的左下角获得一个<div>。像float: left;和float: bottom;在一起。
一个典型的单元格是：
<td id="x0900A"> <!-- 0900 room A -->
<p class="classTitle">
</p>
<div class="classDescrip">
</div>
<p class="instructor">
</p>
<p class="gender">
</p>
<div class="instructorBio">
</div>
<div class="instructorImg">
</div>
<div id="x0900A-roomCount" class="roomCount">
<p id="x0900A-attending" class="attending">attending</p>
<p id="x0900A-capacity" class="capacity">capacity</p>
</div>
</td>
CSS是：
td {
position: relative;
}
div[id$=roomCount] {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
margin: 10px 10px 0 5px;
text-align: left;
opacity: 0.60;
}
.classTitle {
float: left;
margin: 5px 10px 10px 5px;
padding: 0 5px 0 5px;
line-height: 1.25em;
font-size: 1.05em;
text-align: left;
color: #00b8b8;
}
.instructor {
width: 50%;
float: right;
margin: 3px 0 10px 0;
padding: 0 3px 5px 3px;
line-height: 1.25em;
font-size: 0.95em;
text-align: right;
color: #00b8b8;
}
.classDescrip,
.instructorBio,
.instructorImg,
.gender {
display: none;
}
这将.roomCount锁定在<td>的左下角，但破坏了响应性。我得到了整个<body>的水平溢出滚动。你可以在这里看到结果。
我试着在<td>里面放一个包装<div>，使它成为
position: relative;
height: 100%;
但它只有包装好的内容所需的高度，对于许多细胞来说，包装好的东西只有一半低。
因此，我需要一种CSS/jQuery方法来锚定.roomCount，它不会破坏响应性。
注意：
这是对之前的一个问题的重新提交，这个问题太冗长，而且有很多不相关的内容。我在这里重新提交它，希望它能引起注意。
编辑/更新：
在回应@UdoE的评论时：我已经包含了代码并编辑了"冗长"。至少，我希望我已经包含并使它成为一个更好的问题。
针对@ChrisG将其标记为可能的重复：我已经注意到，这是对该问题的重新提交，以及我这样做的原因。截至本文撰写之时，该问题还没有答案或评论。
如果在围绕元素的div上设置overflow: hidden;：
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-4f3956fa4071adb2096e">
机身上的水平滚动将消失。在site.css的第13行：中已经有一条规则影响了这个元素
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
clear: both;
overflow: hidden; /* add this */
}
为了保持.roomCount元素位于单元格的左下角，也许这种方法可以帮助：
.schedule td {
position: relative;
padding-bottom: 30px;
}
div[id$="roomCount"] {
margin: 0;
position: absolute;
bottom: 0;
left: 0;
max-height: 30px;
overflow: hidden;
}
这样做的目的是在td的底部放置30px的填充。然后使用绝对定位将.roomCount元素移动到左下角。
这样，即使绝对定位的元素不流动，填充也会为您提供一个工作区域，该区域将在调整表大小时考虑在内。我在那个元素上添加了一个max-height和overflow: hidden，以防万一。它可能需要一些调整才能适合你。
这是一个jsFiddle