CSS: Make new line go above, not below

问题

I have a div that has some floated children. When the div's width becomes full, it continues to a new line, below the first line (which is the regular, expected behavior). JSFiddle to show what I am talking about.

I want it continue onto a new line above the first line instead following the flow. Is this possible with just CSS? How can I achieve this?

EDIT: Here is a new link with what it does and what I want it to do

EDIT2: Here is an example with more elements

回答1:

Add clear: both; to the child elements. That will force each child to it's own line.

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

Update:

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

回答2:

If it is only ever going to be a separation between 1 and 2 (assuming more than 1 are added as you said it is dynamic) you could add an nth-child to your second .child item like this:

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

JsFiddle

回答3:

You're needing the nth-last-child selector:

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

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

Note that this isn't available in IE8 or older.

来源：https://stackoverflow.com/questions/17426640/css-make-new-line-go-above-not-below