Question

<div id="container" style="float:left;">
        <img src="{{ p.sizes.2.url }}" width="200" height="auto">         
        <div class="trans_caption" style="position:absolute;background-color:#cccccc;">
             Picture Caption
        </div>
</div>

如何在图片顶部叠加标题...但是在底部对齐？另外，我希望标题宽度与容器相同。我试图做宽度：100％，但它不起作用......

Answer 1

that您要找的是什么？

只需在主div中设置position:relative - 它将允许相对于主div设置内部div，并在内部div中设置bottom:0以将其定位在底部。如果float:left width:100%和float没有width:100% {{1}}的小黑客似乎无法正常工作。

Answer 2

绝对定位意味着该元素将定位在最后一个未使用默认值position: static定位的父级上的特定位置。

相对定位与静态相同，除了：

左，右，顶部和底部从正常的“静态”位置轻推定位，
绝对定位的元素将位于其中。

所有这一切都是说，如果将容器定位为相对容器，则trans_caption的绝对定位将相对于容器产生影响，现在它相对于更高级别的容器定位。

此外，绝对定位会将元素置于top: 0; left: 0;，除非另有说明。您需要将标题置于bottom:0;以强制它到容器的底部。

您的trans_caption通常默认为100％宽度，因为<div>是一个块显示的元素，因此它对您提供的示例没有任何作用是有意义的。但是，绝对定位的项目不是这种情况，因此请保持该行。然后，如果您通过使用<div>设置样式，将文本置于text-align: center;内，那么它应该看起来像您期望的那样。

Answer 3

<div style="position: relative; width: 200px;">
   <img src="" />
   <div style="position: absolute; bottom: 0;">
       <!-- caption text here -->
   </div>
</div>

Answer 4

<style>
    div#container {
        position: relative;
        float: left;
    }

    div#container div {
        position: absolute;
        bottom: 0;
        background: #ccc;
    }
</style>

<div id="container">
    ....

Answer 5

您需要在position: relative上设置#container。这将使得相对于该容器div的边缘的绝对定位。
将bottom: 0;添加到.trans_caption，以使文字的基线（不是确切的底部）与图片底部对齐。如果要将文本向上移动，请增加该数字。
将width: 100%添加到.trans_caption，使其与容器一样宽。
如果您想将标题居中，请将text-align: center;添加到.trans_caption。
请注意，图片的auto属性的height值无效。

最好将CSS与HTML标记分开，放在单独的文件中。我们现在拥有的是（try it out）：

#container {
    float:left;
    position:relative;
}

.trans_caption {
    background-color:#cccccc;
    bottom:0;
    position:absolute;
    text-align:center;
    width:100%;
}

Answer 6

我认为您要做的是在容器上设置css background属性。

像这样的东西

<div id="container" style="float:left; width:200px; height:100px; background:url('{{ p.sizes.2.url }}') no-repeat; position:relative">
<span style="position:absolute;bottom:0px">Caption goes here</span>
</div>

我如何在CSS中进行绝对定位？

6 个答案: