PHP 生成的图像没有继承包含 div 的样式

Question

当使用instagram API在我的网站上显示图像时，图像不继承包含div的样式。样式为float:left。所以它们不是堆叠在一起，它们实际上是成行和成列出现的……而不仅仅是一列。

CSS:

#instagram.img {  
float:left;  
margin:10px;  
}

HTML/PHP(省略get data &解析:

<div class="instagram">
<?php foreach ($result->data as $post): ?>  
<a class="group" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div>

我测试了，php之外的图像坚持样式，他们确实这样做了。它们像预期的那样漂浮在水面上。如有任何帮助，不胜感激。

Answer 1

.instagram {  
float:left;  
margin:10px;
display: inline-block;  
}

正如我在评论中所说，#是id的选择器，.是class的选择器。

<div>
<?php foreach ($result->data as $post): ?>  
<a class="group instagram" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img     src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div>  

将.instagram类添加到您的<a>，因为将它添加到您的div将使div向左浮动，而不是图片。

查看显示属性查看display: inline-block; .