javascript - 创建从上到下、从左到右和向右溢出的 CSS div

Question

我试图让我的 div 从上到下流动，但在到达窗口底部时，新的 div 溢出到右边。查看模板布局:http://i.imgur.com/nknD0.png

我尝试了 css/javascript 组合... white-space:nowrap, display: inline, display : table、float:left 和其他但似乎无法像图中那样工作。

Answer 1

在每个 div 上使用 float: right

参见 fiddle :http://jsfiddle.net/maniator/wzYpV/(把pane变大变小看效果)

---

这是一个制作列的 fiddle :http://jsfiddle.net/maniator/wzYpV/

我使用了 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);
    })
}