Float div's left to create multi-column layout?

Say I want to put a random number of same-sized divs开发者_高级运维 in a multi-column layout, like so:

DIV 1   DIV 4   DIV 7...
DIV 2   DIV 5
DIV 3   DIV 6

How can I do this using only CSS, and only the divs (no column container divs)?

You probably need some kind of parent, then use css3 column-count.

<style>
body {
    width: 300px;
    height: 100px;
    border: 1px solid red;

    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}
div {
    width: 48px;
    height: 48px;
    border: 1px solid black;
}
</style>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>

The CSS Grid Layout Module is designed for this use case: http://dev.w3.org/csswg/css3-grid-align/

Here's a demo: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm . It's not well supported, IE10 being the only browser I know of that supports it.