javascript - 将html div标签排列到CSS中的空白区域

Question

我按照如下顺序渲染了三种不同尺寸(小、大、中)的 html div 标签

我的问题是在渲染大图 block 后，剩余的小图 block 将通过创建空白区域进入大图 block 下方。加载 div 标签时，我需要自动将下面的小图 block 移动到空白处。如何使用 CSS 解决我的问题？这是 css 的默认行为吗？

中型平铺 CSS

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

小Tile类

.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