Question

我正在尝试使用预览上传图片。这是正常的。问题是图像在每一行中逐一显示。我希望将图像显示在一行中，并且关闭标记应该显示在图像的右上角，并且应该在悬停时显示。

如何实现这一点。

javascript：

 $("i#dzopen").dropzone({
    paramName: "file",
    maxFilesize: 10,
 url: 'http://www.smsiland.com/UploadImages',
    previewsContainer: "#media-upload-previews",
    uploadMultiple: true,
    parallelUploads: 10,
    maxFiles: 20,
    acceptedFiles: "image/*,audio/*,video/*",
    init: function() {
        this.on("success", function(file, responseText) {
            alert("again");
            console.log("log "+responseText);
            $.each(responseText, function(k, v) {
                console.log("l path " + v.largePicPath);
                console.log("s path " + v.smallPicPath);
                console.log("height " + v.imgHeight + " wid " + v.imgWidth);
            });
            console.log(file);
            alert('uploded ' + file.name);

        });
    }
});

Answer 1

考虑使用 float

启用float（选择left，right和none）时，它会将所有图像放在一行中。

所以，你的html可以是：

<img src="blah.gif" class="float_img" />

你的CSS会有这样的东西：

.float_img {
float:left;
}

这将解决您在标题中所述的问题

Answer 2

希望这会对你有所帮助

<!DOCTYPE html>
<html>
<head>


<style>
 .float_left{
   float:left;
   position: relative;
   width: 100px;
   height: 100px;
   border: 1px solid #999;
 }
.float_left:hover > a.close{display:block;}

a.close{
  display: none;
  position: absolute;
  top:0; 
  left:0;
}

</style>



</head>
<body>
<!--first image panel-->
<div class="float_left">
  <img src="sourceOfImage" />
  <a href="#" class="close">Close</a>
</div>

<!--second image panel-->
<div class="float_left">
   <img src="sourceOfImage" />
   <a href="#" class="close">Close</a>
 </div>
</body>
</html>

图像显示在新行中

2 个答案: