javascript - 在马赛克中的较小图像下方显示全宽 div

Question

我有一个带有图像马赛克的 HTML 结构：每行 4 个图像。

当我单击图像时，我想让全角 div 出现在图像所在的行下方。

我需要让那个元素 ( .div-full-with) 保持流动。

这是一个架构：

我已经尝试过绝对定位，但该元素当然不在流动中。

.div-full-with {
        background-color: #333;
        position: absolute;
        left: 0;
        right: 0;
        height: 100px;
        top: 30px;
      }  

我尝试了其他一些技术（计算等），但我无法做到这一点。

如果结构是静态的，那将非常容易。但是我处于一个循环中，我必须在这样的模板中制作它，其中只有一个元素：

<div class="col-md-3">

    <img src="..."/>

    <div class="hidden-div">some content in full width</div>

</div>

标签： javascripthtmljquerycss