Question

我正在一个网站上工作 - 我的工作组合。在主页面上，我有一个图像网格;每个图像都是该项目页面的链接。

我现在的问题是鼠标悬停描述文字。当用户将鼠标悬停在图像上方时，我希望在图像下方显示简短描述。

我遇到的问题是我如何让描述在图片下方直接显示。在原型中，我手动设置bottom: -50px;，但需要针对不同的文本量进行调整。我希望div的顶部能够自动与其图像的底部对齐。我看到一些答案说bottom: 0;会起作用，但对我来说并没有。

图片本身为float: left;，而描述为position: absolute;;包含它们的div都是float: left;和position: relative;。

我很乐意接受任何建议让它发挥作用。

Answer 1

来自W3C的规范：

bottom指定框的下边距边缘偏移多远   盒子的底部包含块。

top属性指定绝对定位的框的最高边距   边缘偏移到包含块的框的上边缘以下。

而不是bottom，请使用top属性，其值等于或大于100%。

<强> Updated Demo

div.description {
    /* other declarations... */
    position: absolute;
    top: 110%; /* Anything >= 100% */
}

Answer 2

我会对您的CSS规则进行以下调整：

div.description {
    color: black;
    background-color: white;
    font-size: small;

    padding: 5px;
    border: 1px solid black;
    border-radius: 0 0 5px 5px;

    position: absolute;
    top: 100%; /* set top to be bottom edge of parent block */
    margin-top: -5px; /* adjust as needed */
    z-index: 1;

    visibility: hidden;

}

指定top偏移量以将描述块定位在下边缘下方父块，然后使用margin-top来控制空格（使用负边距是如此需要。）

请注意，这与早期发布的解决方案基本相同。

在浮动元素下显示绝对div

2 个答案: