从新行开始最后 3 张图像 - 需要 css 解决方案

Question

有一组图片（3张以上）：

<img src="http://path.to/my/img1.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">
<img src="http://path.to/my/img2.jpg">
<img src="http://path.to/my/img323.jpg">
<img src="http://path.to/my/img99.jpg">

如果您不应用任何样式，它们会排成一行（如果空间允许）。没关系，但是我希望最后 3 张图像始终出现在下一行。是否可以使用纯 css 制作它？ 我找到了一个接近的解决方案：

img:nth-last-child(3){display:block;}

但是，它将图像分成三行（这是有道理的，因为它是display:block 用于最后的第三张图像）。

jsFiddle example

正在寻找纯 css 解决方案。

谢谢。

Answer 1

使用

clear:both 最后三张图片的 css 格式

img {
    float:left;
}
img:nth-last-child(3) {
    clear:both;
}

DEMO