Html 将div环绕在"；“双高”；图片或引文

我有一个流动布局的图像图标网格。图标由两个双高图像分割。我想让图标环绕双高图像。例如，如果双高图像是行中的第一个，则其余图标将填充该行的其余部分，然后向下环绕并填充双高图像旁边并完成下一行

如果我把它们放在一个列表中，会发生的事情是，一旦行被填充，它就会在双高图像的下面，实际上在双高图像的右侧留下一个很大的空白

另一个双高图像是列表中的第七项（第一个双高图像，然后是5个单高图标，然后是下一个双高图像）。我想单高的图像，以环绕这一个也没有留下一个空白行的右下角的图像。理想情况下，我希望将此图像粘贴在右侧，但无法使其正常工作

您可以在此处看到该页面：

现在，我的解决方法是在双高div中放置两个单高div，因此该列表实际上是双高div的列表。它工作正常，但问题是它在右下角留下了一个大的两行空白。我欢迎另一种方法。提前谢谢

CSS

HTML

...
...

.singleHeight {
width: 180px;
height: 180px;
float: left;
margin: 10px;
}

.doubleHeight {
width: 200px;
height: 400px;
float: left;
margin: 5px;
}

<div class="doubleHeight">
<img src="doubleHeightImage1.jpg">
</div>

<div class="doubleHeight">
<div class="singleHeight"><img src="icon1.gif"></div>
<div class="singleHeight"><img src="icon2.gif"></div>    
</div>

<div class="doubleHeight">
<div class="singleHeight"><img src="icon3.gif"></div>
<div class="singleHeight"><img src="icon4.gif"></div>    
</div>
...


<div class="doubleHeight">
<img src="doubleHeightImage2.jpg">
</div>

<div class="doubleHeight">
<div class="singleHeight"><img src="icon5.gif"></div>
<div class="singleHeight"><img src="icon6.gif"></div>    
</div>
...