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

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

图像上的文本块

2 个答案:

fiddle