jquery - 图像上的文本块

Question

我正在使用 instafeed 库将 instagram 图像添加到我的网站，现在使用 instafeed 库非常容易获得图像的标题。

现在我的问题是我想在每张图片的底部都有标题文本。

但由于这是动态创建的，我无法操作输出的 html，所以我想知道是否可以使用 CSS 将图像文本放在每个图像的底部。

HTML

<div id="instafeed">
<img src="http://distilleryimage9.s3.amazonaws.com/3a81fe1e206d11e38bc322000a9d0dcb_7.jpg">
<div class="caption">#windows #shadows #art #bw #abstract #overlap</div>
</div>

CSS

.caption {
    background-color:#ccc;
    }

img {
width: 33.33%;
float: left;

 }

JSFiddle

Answer 1

使用 instafeed 库，您可以以适合您的布局的方式指定模板。

例如，将模板更改为：

var feed = new Instafeed({
    get: 'tagged',
    tagName: 'overlap',
    clientId: 'baee48560b984845974f6b85a07bf7d9',
    sortBy: 'random',
    links: false,
    resolution: 'standard_resolution',
    template: '<div class="wrap"><img src="{{image}}"/><div class="caption">{{caption}}</div></div>'
});

给你一个环绕你的图像和标题的 div。

您可以定义您的样式以获得您想要的效果：

Demo Fiddle 或者Demo txt on img

Answer 2

img {
clear:both;
display:block;
}

这将使图像“推动”它周围的其他浮动元素。

小提琴