html - Floating of gallery image

Question

In this gallery the last image should float to the left but it is positioned in the middle. Whats wrong with the code?

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

在第 7div块之前添加：

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

Answer 2

发生这种情况是因为您的第 4 张图像更高，因此第 7 张图像向左浮动时会撞击该元素。

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

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

注意：nth-child不幸的是，伪类在 上不起作用IE8，但是如果您需要绝对支持该浏览器，您可以简单地使用display: inline-blockandvertical-align: top而不是浮动元素