2

这是将图像从数据库中扔到 php 中的 div 中，而在这里我想通过单击删除图标来删除图像，该图标必须位于从数据库中提取的每个图像的右上角。如何在图像的右上角获得删除图标？这就是我在对话框中显示图像的方式。

<?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>";
}
?>
4

4 回答 4

5

如果我理解正确，请尝试输出如下内容：

HTML

  <div id='popimages'>
      <div class="image">
          <img class="btn-delete" onclick="alert('Do something!');" src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/101.png"/>
          <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://i.i.com.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg'/>
      </div>
  </div>

CSS：

.image {
   width: 100px;
   height: 100px;
   position: relative;
}
.btn-delete {
   position: absolute;
   cursor: pointer;
   right: 2px;
   top: 2px;

   /* This was edited out because it was stupid. See fernholz's answer.
   left: 100%; 
   margin-left: -10px;
   margin-top: 2px; */
}

JSFiddle：http: //jsfiddle.net/TK7zB/

于 2013-03-15T14:37:43.720 回答
2

您需要用 a 包装您的图像，<div>并将您的图像和删除链接放在<div>. 我为您创建了这个小提琴，这可能就是您正在寻找的。

于 2013-03-15T13:56:56.353 回答
1

Drewman 在技术上是正确的，我会将 .btn-delete 的样式更改为

.btn-delete {
   cursor: pointer;
   position: absolute;
   right: 2px;
   top: 2px;
}

顶部和右侧可以更改为距您想要删除图标的角落的任何距离。

Adrenaxus，非常接近，但需要图像 div 的高度和宽度以及相对位置，而不是绝对位置。

于 2013-03-15T16:42:00.367 回答
1

HTML：

<div class="img-pos">
    <span class="close">&times;</span>
    <img src="">
</div>

CSS：

.img-pos{
    position: relative;
}
.img-pos.close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
}
于 2017-01-13T11:07:11.820 回答