Javascript 将html div标记排列到CSS中的空白区域

我以如下顺序呈现了三种不同大小（小、大、中）的html div标记

我的问题是在渲染大瓷砖后，剩余的小瓷砖将通过创建空白而位于大瓷砖下。我需要在加载div标签时自动将下面的小平铺移动到空白处。如何使用CSS解决我的问题？这是css的默认行为吗

中分幅CSS

.clsMediumWidget{
    width: 39.5%;
    height: 245px;
    background-color: #f6f6f8;
    border: 0.2em solid #E9E9E9;
    top: 0px;
    left: 0px;
    float: left;
}

.clsLargeWidget {
width: 39.5%;
height: 494px;
background-color: #f6f6f8;
border: 0.2em solid #E9E9E9;
top: 0px;
left: 0px;
float: left;
}

float: right;

小瓷砖类

.clsSmallWidget{
    width: 19.3%;
    height: 245px;
    background-color: #f6f6f8;
    border: 0.2em solid #E9E9E9;
    top: 0px;
    left: 0px;
    float: left;
}

大瓷砖CSS

.clsMediumWidget{
    width: 39.5%;
    height: 245px;
    background-color: #f6f6f8;
    border: 0.2em solid #E9E9E9;
    top: 0px;
    left: 0px;
    float: left;
}

.clsLargeWidget {
width: 39.5%;
height: 494px;
background-color: #f6f6f8;
border: 0.2em solid #E9E9E9;
top: 0px;
left: 0px;
float: left;
}

float: right;

---

任何建议都很好。

除非你有什么理由不想这样做，否则它应该能解决上面提到的问题

大瓷砖CSS

.clsMediumWidget{
    width: 39.5%;
    height: 245px;
    background-color: #f6f6f8;
    border: 0.2em solid #E9E9E9;
    top: 0px;
    left: 0px;
    float: left;
}

.clsLargeWidget {
width: 39.5%;
height: 494px;
background-color: #f6f6f8;
border: 0.2em solid #E9E9E9;
top: 0px;
left: 0px;
float: left;
}

float: right;

---

是您要找的，我们需要查看代码。缺少足够信息来诊断问题的问题。更详细地描述你的问题，或者在问题本身中加入一个最小的例子。现在我使用float left来安排div。我必须将最后三个小平铺移动到我在图片中标记的空白处。这确实是CSS在使用float:left时的默认行为。根据需要支持的浏览器，您可以查看flexbox。显示：table cell可能也会让您走得很远，但我不太确定细节。您也可以使用

Javascript

解决方案，而不是使用

CSS3

，特别是

列

——这取决于您是否需要支持旧浏览器。答案很好，但问题是大小是动态的。总有一天第二个会很大。我们无法预测哪种类型的瓷砖也是我把这些瓷砖放在手风琴中，手风琴的每一部分都包含这组瓷砖。我想不出一个解决这个问题的纯CSS解决方案。我的第一个建议是说服权力机构让你把所有的瓷砖都做成同样的高度。下一个想法是在任何时候或可能的情况下将两个小瓷砖组合成一个大瓷砖。除此之外，我要说的是，您正在研究一些JavaScript/jquery，以便在需要的地方强制使用各种大小的平铺。如果高度相同，则可以正常工作，但我无法与高度兼容。在我的应用程序中，用户可以调整磁贴大小，重新排列磁贴，还可以在数据库中保存顺序。一切正常，但这是我唯一面临的问题。我知道我们不能用纯CSS修复。你有解决这个问题的想法吗？我想你可以使用javascript来确保大瓷砖始终是手风琴内部的第一个元素。然而，坦白地说，当我得知你计划允许用户调整瓷砖大小和重新排列瓷砖时，我不禁想知道为什么你不从同样的高度开始呢？或者只需使用z索引和20px x，y偏移将瓷砖层叠在另一个瓷砖上。一旦用户将爪子放在瓷砖上，我怀疑东西会看起来很漂亮，除非你以某种方式限制它们。实际上这是要求。如果先用大瓷砖，一切都很好。因此，没有必要重新排列瓷砖。实际上，现在我正试图通过使用来解决这个问题。