在图像上排列标题 [英] arrange caption over an image

问题描述

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

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

CSS:

.image-container {位置:相对；左边距:自动；右边距:自动；宽度:100%；}.image-container img {最大高度:150px；}.image-container p {空白:nowrap；宽度:100%；溢出:隐藏；文本溢出:省略号；位置:绝对；底部:0px；}

我希望图片的标题是:1.定位在图像上(在顶层).2.垂直放置在图像的底部.3.带省略号.4. 不会脱离包装div.

这可能吗?

我正在使用 Twitter 引导程序.

解决方案

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

.image-container {位置:相对；左边距:自动；右边距:自动；宽度:100%；}.image-container img {最大高度:150px；位置:相对；}.image-container p {空白:nowrap；宽度:100%；溢出:隐藏；文本溢出:省略号；位置:绝对；底部:0px；位置:绝对；顶部:0；左:0；text-align: center/* 不确定我是否误解了你的意思 */}.image-container img {边距顶部:15px；}

关于省略号，那么您可以在文本后添加:….这是你的意思吗?

I have this example: 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;
}

I would like the caption of the image to be: 1. positioned over the image (in the top layer). 2. placed vertically in the bottom of the image. 3. with ellipsis. 4. will not get out of the wrapping div.

Is this possible?

I am using twitter bootstrap.

解决方案

I would do that with position: relative; and position: absolute;, like so:

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

Regarding the ellipsis, then you can add this: … after the text. Was that what you meant?

这篇关于在图像上排列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！