图像显示在新行中

时间:2014-12-17 10:34:51

标签: html css

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

我试了jsfiddle.net/xrcwrn/m51wbb9c/

如何实现这一点。

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);

        });
    }
});

2 个答案:

答案 0 :(得分:0)

考虑使用 float

启用float(选择left,right和none)时,它会将所有图像放在一行中。

所以,你的html可以是:

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

你的CSS会有这样的东西:

.float_img {
float:left;
}

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

答案 1 :(得分:0)

希望这会对你有所帮助

<!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>