html - 「ダブルハイト」画像の周りにDIVをラップするか、引用符をプルします

Question

流動的なレイアウトの画像アイコンのグリッドがあります。アイコンは、2つの高さの2つの画像で分割されています。2倍の高さの画像にアイコンをラップさせたいのですが。たとえば、2倍の高さの画像が行の最初の場合、残りのアイコンが行の残りの部分を塗りつぶし、次に折り返し、2倍の高さの画像の横に入力して、次の行を完成させます。

それらをすべてリストにまとめると、行が入力されると、2倍の高さの画像の下に折り返され、2倍の高さの画像の右側に大きな空白が効果的に残ります。

もう1つのダブルハイト画像は、リストの7番目の項目です（最初のダブルハイト画像、次に5つのシングルハイトアイコン、次のダブルハイト画像）。単一の高さの画像も、画像の右下に空白行を残さずに、この画像をラップアラウンドしたいと思います。理想的には、この画像を右側に貼り付けたいのですが、それを機能させることができませんでした。

あなたはここでページを見ることができます： http ：//www.kandlekidswear.com/Pages/designs.html

現在、私の回避策は、2つのシングルハイトdivをダブルハイトdiv内に配置しているため、リストは事実上ダブルハイトdivのリストです。正常に機能していますが、問題は、右下に2行の大きな空白が残っていることです。別のアプローチを歓迎します。前もって感謝します！

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