需要帮助实现动态网格布局

Question

请在此处参考this小提琴，了解我试图解释的问题。我想要这样的布局，其中div将利用所有可用空间。这里有8个div可以调整大小。当我最小化div A和B时，在这些div下面会看到一个空白区域。我希望div D和E占据那个空白区域。

我怎样才能做到这一点？有一些jQuery插件可用，如gridstack，但他们的调整大小功能有些不同。不使用任何可用的jQuery插件，是否有可能实现上述效果？如果您有任何有用的资源，请分享。提前谢谢。

修改

一种解决方案可能是.container中有3列，但如果div水平调整大小，则此解决方案可能无效。

Answer 1

您可以尝试使用3 col解决方案（并使用javascript正确排序每列中的项目）：

.col {
  background: whitesmoke;
  width: 165px;
  float: left;
}
.item {
  height: 150px;
  width: 150px;
  margin: auto;
  background: grey;
  margin-top: 15px;
}

.custom {
  height: 265px;
}
.custom2 {
  height: 30px;
}

<div class="container">
        <div class="col">
            <div class="item"></div>
            <div class="item custom"></div>
            <div class="item"></div>
        </div>
        <div class="col">
            <div class="item"></div>
            <div class="item custom2"></div>
            <div class="item"></div>
        </div>
        <div class="col">
            <div class="item custom2"></div>
            <div class="item"></div>
            <div class="item custom"></div>
        </div>
    </div>

Answer 2

Change your div structure to the following I think that will help you.

$(document).ready(function() { 
    $('.tile').resizable({
        handles: 'e, s, se',
		containment: '.container'
    });
});

.tile
{
    height: 180px;
    width: 100%;
    float: left;
    background-color: rgb(232, 232, 232);
    border: 1px solid red;
    margin: 0% 0% 3% 0%;
    min-height: 20px;
    max-height: 360px;
    max-width: 540px;
    min-width: 180px;
    text-align: centre
}

.verticalspace{
    width:180px;
    float:left;
    margin: 0% 0% 0% 1%;
}

.container{
    overflow: hidden
}

<div class="container">
    <div class= "verticalspace">
        <div class="tile">A</div>
        <div class="tile">E</div>
    </div>
    <div class= "verticalspace">
        <div class="tile">B</div>
        <div class="tile">F</div>
    </div>
    <div class= "verticalspace">
        <div class="tile">C</div>
        <div class="tile">G</div>
    </div>
    <div class= "verticalspace">
        <div class="tile">D</div>
        <div class="tile">H</div>
    </div>
</div>

this kind of structure will stay close even if somediv above it is collapsed also