css - 右侧定位的弹出列表不会留在容器内

Question

我有一系列帖子标题，这些标题直观地形成了一个列表。将鼠标悬停在列表中的一行上时，一个 <div>包含帖子内容的 . 在行的右边缘可见，表现得像一个弹出菜单。此弹出菜单 <div>比行高(在大多数情况下)。它的高度也是可变的，因此不可预测。

See here .滚动到底部。

因为这个弹出窗口 <div>绝对位于其父级的右侧，它实现了所需的弹出效果。

但是如果滚动到列表底部，您会看到最后一项延伸到 #schedule-section-container 的底部边缘以下。的边界。我想以最干净的方式纠正这个问题。

我知道这是因为定位。但是有没有一种方法可以在不猜测 margin-bottom 的情况下实现相同的弹出效果？ ？我想使用 float ，但我不知道如何让列表在弹出时保持其短高度。

Answer 1

仅使用 CSS 这可能有点棘手，但我认为您正在寻找的是:

.hentry:last-child > .entry-content { bottom: 0; }

这会将最后一个 child 定位到底部而不是顶部，从而在不超出容器边界的情况下提供所需的效果。由于最后几个实际上超出了界限，您也可以尝试 :nth-last-child 从末尾开始计数，如下所示:

.hentry:nth-last-child(1) > .entry-content { bottom: 0; } /* This is last child */
.hentry:nth-last-child(2) > .entry-content { bottom: 0; } /* Second to last */
.hentry:nth-last-child(3) > .entry-content { bottom: 0; } /* Third to last, etc */

由于 Wordpress 在一些地方使用 .hentry，因此可能需要在开头添加一些更多的特殊性以将其限制为仅此页面，但这应该为您提供一个很好的起点。此外，如果需要较旧的 IE 支持，您可能需要考虑使用 Selectivzr