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

小瓷砖课

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

大图块CSS

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

任何建议都很好。

最佳答案

除非出于某些原因您不想这样做，否则它应该可以解决上述问题。

大图块CSS

float: right;

Fiddle Example Here