如何在缩略图的框架中显示用户头像图片？

Question

我网站上的所有上传图片都有缩略图的边框。我已经设置好了，以便有空间显示用户的姓名和框架中的头像图片以及他们上传的图片。希望这两个图像得到更好的理解什么，我试图完成 link to imgur

我用这个用户名和个人资料照片：

<?php if($ib->user['id']) {?> 
div class="userInfo"> 
<img class="avatar" width="40" height="40" src="<?php echo Config::$absolutePath.$ib->user['avatar']; ?>"/> 
<div class="name"> 
    <strong> 
     <a href="<?php echo Config::$absolutePath.'user/'.$ib->user['name']; ?>"><?php echo $ib->user['name']; ?></a> 
    </strong> 
</div> 

这为各地上传的框架

#imageGrid div { 
     position: absolute; 
     overflow: hidden; 
     border-radius: 0px; 
    border: 1px solid #FFFFFF; 
padding: 60px 10px 10px 10px; 
moz-box-shadow: 3px 3px 5px 6px #ccc; 
-webkit-box-shadow: 3px 3px 5px 6px #ccc; 
box-shadow:   3px 3px 5px 6px #a1a1a1; 
background-color: #dddddd; 

我不知道下一步应该尝试什么，所以我想看看我是否可以添加/组合div，但那是行不通的。

如果您需要更多信息，更好的描述或更多的代码，请告诉我。在此先感谢，我在这方面很新颖，而这是我坚持的一件事。

Answer 1

，你需要把它们控制的它是什么布局的容器元素，你可以使用用户信息

<div class="userInfo"> 
<img class="avatar" width="40" height="40" src="<?php echo Config::$absolutePath.$ib-  >user['avatar']; ?>"/> 
<div class="name"> 
<strong> 
    <a href="<?php echo Config::$absolutePath.'user/'.$ib->user['name']; ?>"><?php echo $ib->user['name']; ?></a> 
</strong> 
</div> 
</div> 

.userInfo { 
width:50px; 
} 

.avatar { 
width:40px; 
} 

.name { 
width:40px; 
} 

为#imageGrid DIV我会删除你最有什么存在和将它应用到我上面添加的特定CSS类。