Tengo un div
donde quiero mostrar una galería de imágenes. Estas imágenes vienen de la base de datos, el resultado que quiero lograr es algo como lo siguiente:
Pero lo que logro es algo así (las imágenes no se acomodan al div
):
El código que llevo es este:
HTML
<div class="col-md-12">
<div id="imgSlide" class="">
<hr>
<div id="columnasSlide"></div>
</div>
</div>
JS
//Jala las fotos del sistema
$(document).on("click", ".modalEditar", function () {
var eventId = $(this).data('id');
$.ajax({
url: "traerPathFotos",
method: "GET",
data: { id: eventId },
async: false,
dataType: "json",
success: function (respuesta) {
$('#columnasSlide').html(' ');
console.log(respuesta);
if (respuesta != "") {
$('#columnasSlide').html("");
for (var i = 0; i < respuesta.length; i++) {
$('#columnasSlide').append('<span><i class="fa fa-times btn btn-danger"></i></span><div id="bloque"><img src="/Images/ActivosImages/imagepath/' + respuesta[i] + '" class="img-thumbnail"></div>');
}
} else { }
}
});
});
CSS
#columnasSlide {
position: relative;
margin: 20px auto;
height: auto;
text-align: center;
border: 2px dashed #ccc;
color: #999;
padding: 20px;
}
#columnasSlide #bloque {
position: relative;
margin: auto;
width: 200px;
height: auto;
}
#columnasSlide i {
position: absolute;
top: 6px;
right: 6px;
background-color: red;
border-radius: 3px;
}
¿Cómo puedo hacer para que las imágenes se acomoden como en la imagen 1?
PS: ¿Afecta en algo que esté en un modal? (para efectos de acomodo)