CSS：将新行放在上面，而不是下面

Question

我有一个div，有一些漂浮的孩子。当div的宽度变满时，它会继续到新行，低于第一行（这是常规的预期行为）。 JSFiddle to show what I am talking about。

我希望它继续在第一行 之后继续行，而不是在流程之后。只有 CSS 才有可能吗？我怎样才能做到这一点？

编辑：以下是what it does and what I want it to do

的新链接

EDIT2： Here is an example with more elements

Answer 1

将clear: both;添加到子元素。这会迫使每个孩子都有自己的路线。

http://jsfiddle.net/e7qde/6/

<强>更新

http://jsfiddle.net/e7qde/12/

Answer 2

如果它只是1和2之间的分离（假设你说它是动态的，则添加多于1个）你可以在第二个nth-child项目中添加.child这样：

.child:nth-child(2) {
    clear:left;
}

JsFiddle

Answer 3

您需要nth-last-child选择器：

http://jsfiddle.net/e7qde/16/

.child:nth-last-child(even) {
    clear: both;
}

请注意，这在IE8或更早版本中不可用。