php - 每4张图片清晰

Question

我有一堆图片；我需要将它们向左浮动，每 4 张图像清除它们并转到下一行(如表格):

for ($i = 1; $i <= 24; $i++) {
    if ($i % 4 == 0) {
        echo "<img src='" . base_url('/images/question.jpg') . "' alt='Smiley face' height='65' width='65' id='" . ($i-1 ) . "' class='guess last_in_row'><div class='img_container last_in_row'></div>";
    } else {
        echo "<img src='" . base_url('/images/question.jpg') . "' alt='Smiley face' height='65' width='65' id='" . ($i-1 ) . "' class='guess '><div class='img_container'></div>";
    }
}

我尝试了很多，但无法获得所需的输出:我最后一次尝试是:

.guess{
    float: left;
    display: block;
}
.last_in_row:after{
        clear: left;

}

Fiddle with the rendered HTML

Answer 1

作为纯 CSS 解决方案，您可以使用 :nth-of-type()像 :nth-of-type(4n+1) 这样的伪类将 clear: left; CSS 声明应用于每个 4 图像元素从 1 开始:

EXAMPLE HERE

#images img:nth-of-type(4n+1) {
    clear: left;
}

规范规定:

6.6.5.4. :nth-of-type() pseudo-class

The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element. See :nth-child() pseudo-class for the syntax of its argument. It also accepts the ‘even’ and ‘odd’ values.

值得注意的是:nth-of-type()伪类is supported in IE9+ .