将html div标签安排到CSS中的空白区域

Question

我已经按照下面的顺序渲染了三种不同大小（小，大，中）的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;
}

任何建议都会很棒。

Answer 1

除非有某种原因你不想这样做，否则它应该解决上面提到的问题。

大块CSS

float: right;

Fiddle Example Here