0

我有这个例子：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。

这可能吗？

我正在使用推特引导程序。

4

3 回答 3

1

我会用 position: relative; 和位置：绝对；，像这样：

.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; 在文本之后添加：那是你的意思吗？

于 2012-10-23T20:24:47.893 回答
0

1-添加top:0x;到.imageContainer p4-bottom
使用word-wrap: break-word。.imageContainer p您还必须为包含的 div设置一个heightin并将元素的宽度设置为. 这是您的自动换行示例。pxp100%

于 2012-10-23T20:14:32.777 回答
0

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

于 2012-10-23T20:07:47.137 回答