使用jquery php css将删除图标放置在图像的角落
在这里,我把数据库中的图像放到php中的一个div中,而在这里,我想通过单击delete图标来删除该图像,该图标必须位于从db中提取的每个图像的右上角。如何在图像的右上角获得删除图标?这就是我在对话框中显示图像的方式使用jquery php css将删除图标放置在图像的角落,php,jquery,css,Php,Jquery,Css,在这里,我把数据库中的图像放到php中的一个div中,而在这里,我想通过单击delete图标来删除该图像,该图标必须位于从db中提取的每个图像的右上角。如何在图像的右上角获得删除图标?这就是我在对话框中显示图像的方式 <?php $query = "SELECT * FROM files_images"; $res = mysql_query($query); while ($row = mysql_fetch_array($res)) { ech
<?php
$query = "SELECT * FROM files_images";
$res = mysql_query($query);
while ($row = mysql_fetch_array($res)) {
echo "<div id='popimages'>";
echo "<img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://localhost/PhpProject2/user_data/" . $row['filename'] . "'/>";
echo "</div>";
}
?>
您需要用
包装图像,并将图像和删除链接放在
内。
我已经为您创建了,这可能就是您想要的。如果我理解正确,请尝试输出如下内容:
HTML
JSIDLE:Drewman在技术上是正确的,我会将.btn delete的样式更改为
.btn-delete {
cursor: pointer;
position: absolute;
right: 2px;
top: 2px;
}
顶部和右侧可以更改为与要删除图标的角的任意距离
Adrenaxus非常接近,但需要图像div的高度和宽度以及相对位置,而不是绝对位置。HTML:
<div class="img-pos">
<span class="close">×</span>
<img src="">
</div>
任何小提琴链接或任何图像。请询问一个问题。然后,你想做的是在图像中有一个DIV的删除图像图标,然后将删除图标定位到何处。考虑解释你的答案。不鼓励只使用代码的答案。
.btn-delete {
cursor: pointer;
position: absolute;
right: 2px;
top: 2px;
}
<div class="img-pos">
<span class="close">×</span>
<img src="">
</div>
.img-pos{
position: relative;
}
.img-pos.close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
}