Question

我正在使用Gridster进行网页。小部件上有图像。可以使用+和X按钮添加和删除这些图像。

点击+后，会打开一个模态并显示我从服务器动态检索的图像

模式是<div1 class="modal-body">。我需要<div2 class="outerdiv">。

在div1的单行中，我应该有div2的相同数量。div1应该div2彼此正确分开<div3 class="innerdiv">并且每行的数量相同。

然后div2.The将会在每个.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%; } div3`中包含我的图像，该图像应该只适合该div。

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

我试过的CSS

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

我的服务器实际代码

<div class="outerdiv"><div class="innerdiv"><img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png"></div></div>

我的代表形象：

preset class

我不知道我做了什么是对的，因为当我在浏览器中检查元素时，我看到图像是从div中出来的，有时图像几乎相互重叠

Jquery函数，它将innverdiv应用于点击的图像。我希望它应用于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'); }) });

if test_data: n_test = len(test_data)
n = len(training_data)

Fiddle

Answer 1

将preselect课程移至innerdiv。

进行一些这些css修改：

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

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

结帐fiddle

限制div中的图像并将div排列在div

1 个答案: