Question

我有一系列可视化形成列表的帖子。将鼠标悬停在列表中的某一行上时，包含帖子内容的<div>在该行的右边缘变为可见，其行为类似于弹出菜单。此弹出按钮<div>的高度大于行（在大多数情况下）。它的高度也是可变的，所以它是不可预测的。

See here。滚动到底部。

因为此弹出按钮<div>绝对位于其父级的右侧，所以它可以实现所需的弹出效果。

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

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

Answer 1

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

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

将最后一个孩子放在底部而不是顶部，在不超出容器边界的情况下提供所需的效果。由于最后几个实际上超过了界限，你也可以尝试：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

具有右侧定位弹出的列表不会保留在容器内

1 个答案: