我需要一个 <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> .可以看到结果here .
我试着放一个 wrapper <div>在<td>里面并制作它
position: relative;
height: 100%;
但它的高度仅满足包装内容的要求，对于许多单元格而言，它只是下降了一半。
所以，我需要一种 CSS/jQuery 方式来锚定 .roomCount这不会破坏响应能力。
注意:
这是对 earlier question 的重新提交那太罗嗦了，而且有很多无关紧要的内容。我在这里重新提交它，希望它能引起注意。
编辑/更新:
回应@UdoE 的评论:我已经包含了代码并编辑了“冗长”部分。至少，我希望我已经把它变成了一个更好的问题。
作为对@ChrisG 将此标记为可能重复的回应:我已经注意到这是对该问题的重新提交以及我这样做的原因。截至撰写本文时，该问题还没有答案或评论。
最佳答案
如果你设置overflow: hidden;在环绕元素的 div 上:
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-4f3956fa4071adb2096e">
... body 上的水平滚动将消失。在第 13 行的 site.css 中已经有影响此元素的规则:
.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以防万一。它可能需要一些调整才能适合您。
关于javascript - 有没有一种 jQuery 方法可以使 <div> 出现在表格单元格的左下方，而不会破坏响应能力？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57061842/