如何在不破坏响应性的情况下将 <div> 锚定到表格单元格的左下角？
Posted
技术标签:
【中文标题】如何在不破坏响应性的情况下将 <div> 锚定到表格单元格的左下角？【英文标题】：How to anchor a <div> to the lower left of a table cell without destroying responsiveness? 【发布时间】：2019-11-24 15:39:38 【问题描述】：简而言之，在表格中，在响应式网页上，我在 <td>s 中添加了 <div> 并将其锚定到单元格的左下角将position: relative 放在<td> 和
position: absolute;
bottom: 0;
left: 0;
在<div>。
这似乎破坏了页面的响应能力。现在，在大约1260px 的断点处，整个页面出现了水平溢出滚动。超过该宽度，页面很好；低于该点，出现水平溢出滚动。
我需要一个 CSS/jQuery 解决方案来将 <div> 锚定到表格单元格的左下角，而不会破坏页面的响应能力。我正在寻找类似float: left; 和float: bottom; 的东西。
我尝试制作<td>display: flex;，但这迫使所有单元格在左侧变成一长列。
我的问题有两个：
1) 为什么页面的响应会中断？ （我正在学习。我想了解。）
2) 如何实现将<div> 锁定在左下方的目标，同时仍保持页面响应？
目前，典型的<td> 如下所示：
<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：
.schedule 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;
这可以将 roomCount <div> 定位在我想要的位置，但是，现在整个页面上出现水平溢出滚动 (<body>)。
编辑/更新：
我重新编写了问题，编辑了不相关的信息，我希望这个更短的重新编写的版本会引起一些关注。
【问题讨论】：
【参考方案1】：老实说，我不是 100% 确定你在问什么，但是如果你不希望代码溢出，请将 overflow:hidden 添加到 td 的元素中，这样就不会出现任何内容。您的代码，到处都是id = "ect" 的html，但您的代码中没有#etc。祝你好运
编辑：很抱歉没有识别 ID，我以前从未见过这样的 ID
【讨论】：
感谢您的意见。div[id$=roomCount] ... 在 CSS 中。 ID 用于在页面加载时填充内容的 javascript。 <td> 上的 overflow: hidden; 不能治愈页面/正文上的水平溢出滚动。我以为我使用了正确的术语来描述发生的事情。当在页面上向左滑动时，整个页面向左滚动，在页面边缘和视口边缘之间的右侧留下一条黑带。可以看到效果here。
@alxfyv 好的，所以我现在明白你的意思了，我无法复制这个问题，因为我的显示器宽度大于页面宽度，所以我无法滚动。我真的只有一个想法，尝试设置bodyoverflow-x:hidden; width:100vw; 这样就没有东西可以水平地越过屏幕的边缘，但是这使您无法横向滚动整个页面，但td的滚动不应该受到影响。我不知道是什么原因造成的，而且这个空间甚至没有出现在检查元素中。如果这不起作用，请尝试将 margin:0; 添加到正文。
感谢您的时间和考虑。我提到的earlier question 得到了解决问题的答案。但我非常感谢您的帮助和努力。以上是关于如何在不破坏响应性的情况下将 <div> 锚定到表格单元格的左下角？的主要内容，如果未能解决你的问题，请参考以下文章
如何在不破坏 Nth-Child 逻辑的情况下将 Div 插入 Flexbox 砖墙？
如何在不使用 .get() 或 .load() 的情况下将 ajax 数据加载到 DIV？
如何使用 JQuery 在不移动页面的情况下将 div 的整个视图替换为另一个 div