是否有一种jQuery方式来创建< div>出现在表格单元格的左下角，不会破坏响应能力吗? [英] Is there a jQuery way to make a <div> appear at the lower left of a table cell that won't destroy responsiveness?
问题描述
我需要在表单元的左下角找到一个<div>.像float: left;和float: bottom;一样.
I need to get a <div> to be at the bottom left corner of a table cell. Something like float: left; and float: bottom; together.
一个典型的单元格是:
<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>的水平溢出滚动.您可以在此处看到结果.
This locks .roomCount to the <td>'s bottom left but destroys responsiveness. I get horizontal overflow scrolling of the whole <body>. You can see the result here.
我尝试将包装器<div>放入<td>内并制成
I tried putting a wrapper <div> inside the <td> and making it
position: relative;
height: 100%;
但是它只有包装内容所要求的高度，对于许多单元格来说，包装内容只是其中的一部分.
but it's only so tall as the wrapped content requires which, for many cells, is only partway down.
因此，我需要一种CSS/jQuery方式来锚定.roomCount且不会破坏响应能力.
So, I need a CSS/jQuery way to anchor .roomCount that doesn't break responsiveness.
注意:
This is a resubmission of an earlier question that was too wordy and had much irrelevant content. I'm resubmitting it here in the hope that it will garner notice.
编辑/更新:
响应@UdoE的评论:我已经包含了代码并编辑了冗长".至少，我希望我有一个更好的问题.
In response to @UdoE's comment: I have included the code and edited the "wordiness." At least, I hope I have and made it a better question.
在回应@ChrisG的标签时，这可能是重复的:我已经注意到，这是对该问题的重新提交，也是我这样做的原因.截止至撰写本文时，该问题尚无答案或评论.
In response to @ChrisG's labeling this a possible duplicate: I already noted that this is a resubmission of that question and the reason why I did it. There are no answers or comments to that question as of this writing.
推荐答案
如果在环绕元素的div上设置overflow: hidden;:
If you set overflow: hidden; on the div that wraps around the element:
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-4f3956fa4071adb2096e">
...主体上的水平滚动将消失.在第13行的 site.css 中已经存在影响该元素的规则:
...the horizontal scroll on the body will go away. There is already a rule affecting this element in site.css on line 13:
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
clear: both;
overflow: hidden; /* add this */
}
为了将.roomCount元素放置在单元格的左下角，也许这种方法可以有所帮助:
For keeping the .roomCount element positioned in the lower left of the cell, maybe this approach can help:
.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元素移到左下角.
What this does is place 30px of padding at the bottom of the td. Then uses absolute positioning to move the .roomCount element into the lower left corner.
这样，即使绝对定位的元素不可用，填充也为您提供了一个需要处理的区域，该区域将在调整表大小时得到考虑.我在该元素上添加了max-height和overflow: hidden以防万一.可能需要一些调整才能适合您.
This way, even though absolute positioned elements are out of flow, the padding gives you an area to work with that is going to be accounted for when the table is resizing. I added a max-height and overflow: hidden on that element just in case. It will probably take some tweaking to get right for you.
这篇关于是否有一种jQuery方式来创建< div>出现在表格单元格的左下角，不会破坏响应能力吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
