在图像上排列标题答案

【问题标题】：arrange caption over an image在图像上排列标题
【发布时间】：2012-10-24 04:24:47
【问题描述】：

<div class="span2">
    <div class="image-container">
        <img alt="" src="http://placehold.it/150x120"/>
        <p>asdadsadasdasdsadasdasdasdasdsadsad</p>
    </div>
</div>

CSS：

.image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.image-container img {
    max-height: 150px;
}

.image-container p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;
}

我希望图片的标题是： 1. 定位在图像上（在顶层）。 2.垂直放置在图像的底部。 3.用省略号。 4.不会跳出包裹的div。

这可能吗？

我正在使用 twitter 引导程序。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我会用 position: relative;和位置：absolute;，像这样：

.image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.image-container img {
    max-height: 150px;

    position: relative;

}

.image-container p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;

    position: absolute;
    top: 0;
    left: 0;

    text-align: center /* Not sure if I misunderstood you with this */

}


.image-container img {
    margin-top: 15px;
}

关于省略号，您可以在文本后添加：&hellip;。你是这个意思吗？

【讨论】：

【解决方案2】：

使用z-index 指定顺序，因此您可以放置即两个 div 相互重叠，并指定哪个在顶部或底部。至于定位，您可以使用负值（即top: -50px;）将元素“提升”到其目标位置之上。

【讨论】：

【解决方案3】：

1- 将top:0x; 添加到.imageContainer p 代替bottom
4- 在.imageContainer p 上使用word-wrap: break-word。此外，您必须在 px 中为包含的 div 设置 height，并将 p 元素的宽度设置为 100%。 here's your sample 自动换行。

【讨论】：