1

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

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

另一个双高图像是列表中的第七项（第一个双高图像，然后是 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>
...
4

0 回答 0