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

请参阅小提琴：http://jsfiddle.net/maniator/wzYpV/ （使窗格变大和变小以查看效果）

以下是制作列的小提琴：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);
    })
}

Answer 2

好吧它还没有完全支持，但是多列布局在CSS3中。

http://www.quirksmode.org/css/multicolumn.html

Answer 3

那么这样的事情怎么样？

http://jsfiddle.net/nPSUM/6/

我认为它并不像你想要的那样，但它非常接近......我想..

Answer 4

第一

http://jsfiddle.net/nPSUM/

第二

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

创建读取自上而下，左右和向右溢出的CSS div

4 个答案: