围绕“双倍高度”图像包裹DIV或拉引号

Question

我在流畅的布局中有一个图像图标网格。图标由几个双倍高度的图像分解。我想让图标环绕双倍高度的图像。例如，如果双倍高度图像是行中的第一个，则其余图标将填充行的其余部分，然后换行并填充双倍高度图像旁边的并完成下一行。

如果我只是将它们全部放在一个列表中，那么一旦填充该行，它会包裹在双倍高度图像下面，有效地在双倍高度图像的右侧留下一个大的空白区域。

另一个双倍高度图像是列表中的第七个项目（第一个双倍高度图像，然后是5个单高度图标，然后是下一个双倍高度图像）。我希望单个高度的图像也可以环绕这个图像，而不会在图像的右下角留下空白行。理想情况下，我想把这个图像放在右边，但是无法让它工作。

你可以在这里看到这个页面： http://www.kandlekidswear.com/Pages/designs.html

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

CSS

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

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

HTML

<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>
...