Изображения показываются в новой строке

-4

Я пытаюсь загрузить изображения с предварительным просмотром. Это работает правильно. Проблема заключается в том, что изображения отображаются по одному в каждой строке. Я хочу показывать изображения в одной строке, а знак закрытия должен отображаться в правом верхнем углу изображения и должен отображаться при наведении.Изображения показываются в новой строке

Я пробовал 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); 

     }); 
    } 
});

источник

2014-12-17 xrcwrn

Пожалуйста, укажите соответствующий код в самом вопросе. Если JSFiddle недоступен, этот вопрос станет совершенно бесполезным. –

Я включил внешнюю библиотеку css. Я не знаю, какую часть включить сюда. Поэтому я добавил в скрипке – xrcwrn

С кодом, который вы сейчас включили, ваш вопрос еще более запутан. Вы отметили это как HTML и CSS, но единственный код, который вы включили, - это фрагмент jQuery, который, как представляется, использует плагин, о котором вы даже не упомянули. См. Http://stackoverflow.com/help/how-to-ask. –

Рассмотрите возможность использования поплавка

При включении поплавка (с выбором слева, справа и нет), он будет иметь все изображения в одной строке.

Итак, ваш HTML может быть:

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

Ваш CSS будет иметь что-то вроде этого:

.float_img { 
float:left; 
}

Это будет решить эту проблему вы указывали в названии

источник

2014-12-17 10:40:08 Adib

Надежда это поможет вам

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

источник

2014-12-17 10:51:16

Изображения показываются в новой строке

ответ

Смежные вопросы