Javascript 将图像限制在div内并将这些div排列在div内

我正在使用Gridster制作网页。小部件上有图像。可以使用

+

和

X

按钮添加和删除这些图像

单击

+

，将打开一个模式并显示我从服务器动态检索的图像

模态是

。我想要

在

div1

中的一行中，应该有相等数量的

div2

是我想要的。整个

div1

应该有

div2

，它们彼此正确分开，并且每行的数量相同

然后是

，它将位于每个

div2中。

div3`将包含我的图像，该图像应仅适合该div

总的来说，当我打开我的模态时，图像应该对称且正确地相互放置

我试过的CSS

.modal-body {
  width: 100%;

  position: relative;
  text-align:center;
}

.outerdiv {
  height: 90px;
  width: 90px;
  display:inline-block;
  margin: 10px;
}


.innerdiv{
max-height:95%;
max-width:95%;


}

服务器的实际代码

<div class="modal-body">

            {% for file in brands %}
            {% load static %}
            <div class="outerdiv"><div class="innerdiv"><img src="{% get_static_prefix %}images/brands/{{file}}"></div></div>
            {% endfor %}      

    </div>

---

将

预选

类移动到

innerdiv

进行以下css修改：

img {
  width: 100%;
  height: 100%;
}

.preselect{
  background: lightgreen;
  border: 1px solid black;
}

结帐

var parentLI;
$(document).on("click", ".addmorebrands", function() {
                parentLI = $(this).closest('li');
        $('#exampleModalCenter').modal('show');
            $('#exampleModalCenter img').click(function(){
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
      })
    });

img {
  width: 100%;
  height: 100%;
}

.preselect{
  background: lightgreen;
  border: 1px solid black;
}