Creating CSS divs that read top-bottom, left-right and overflow to the right

问题

I'm trying to get my divs to flow top-to-bottom, but upon reaching the bottom of the window, overflow new divs to the right. See template layout: http://i.imgur.com/nknD0.png

I've tried css/javascript combinations of... white-space:nowrap, display: inline, display: table, float:left, and others but can't seem to get it working like in the diagram.

回答1:

First

http://jsfiddle.net/nPSUM/

Second

http://jsfiddle.net/AKW5A/1/

回答2:

Use float: right on each of the divs

See fiddle: http://jsfiddle.net/maniator/wzYpV/ (make the pane larger and smaller to see the effect)

Here is a fiddle that makes columns: http://jsfiddle.net/maniator/wzYpV/

I used jQuery:

var maxHeight = $('.overflow').height();
var floatHeight = $('.float').height();
var amountOfFloat = $('.float').length;

if(floatHeight * amountOfFloat > maxHeight){
    var minPer = Math.floor(maxHeight / floatHeight);
    var overflow = $('.overflow');
    $('.float').each(function(index, item){
        console.log(item, index);
        if(index%minPer == 0 && index != 0){
            overflow = $('<div>', {class: 'overflow'});
            $('body').append(overflow);
        }
        $(item).appendTo(overflow);
    })
}