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

时间:2013-02-15 01:18:59

标签: php html css

我网站上的所有上传图片都在缩略图周围有一个框架。我设置它,以便有空间显示用户的名字和框架中的头像图片及其上传的图像。希望这两个图像能够更好地理解我想要完成的任务 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,但这不起作用。

如果您需要更多信息,更好的说明或更多代码,请与我们联系。在此先感谢,我对此非常陌生,这是我坚持的一件事。

1 个答案:

答案 0 :(得分:1)

你需要将它们放在一个容器元素中,该元素控制其中的内容布局,你可以使用userInfo

<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类。