我网站上的所有上传图片都在缩略图周围有一个框架。我设置它,以便有空间显示用户的名字和框架中的头像图片及其上传的图像。希望这两个图像能够更好地理解我想要完成的任务 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,但这不起作用。
如果您需要更多信息,更好的说明或更多代码,请与我们联系。在此先感谢,我对此非常陌生,这是我坚持的一件事。
答案 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类。