浮动画廊图像

Question

在this gallery中，最后一张图像应该向左浮动，但它位于中间。代码怎么了？

This is the whole code CSS

This is the whole code HTML

HTML：

<div class="text-block7" > <a href="gal/60.png" class="gal2" rel="gal"><img src="gal/thumb/60.png" alt=""></a> </div>

CSS：

#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}

Answer 1

在第7个div块之前添加：

<div style="clear:left"></div>

Answer 2

发生这种情况是因为你的第四张图像较高，所以第七张图像向左浮动时会撞击该元素。

为了防止这种行为，只需定义一个css规则，在所涉及的每个clear:left div上应用3n + 1：例如

div[class^="text-block"]:nth-child(3n + 1) {
   clear: left;
}

注意：遗憾的是nth-child伪类不适用于IE8，但如果您需要绝对支持该浏览器，则只需使用display: inline-block和vertical-align: top代替浮动元素