Question

我有这个例子：http://jsfiddle.net/WkpL9/
HTML：

<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 bootstrap。

Answer 1

我会用位置：相对;和位置：绝对;，如下：

.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;
}

关于省略号，您可以在文本后添加：…。那是你的意思吗？

Answer 2

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

Answer 3

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

在图像上排列标题

3 个答案: