基于容器高度的浮动柱支撑DIV堆叠

时间:2011-12-15 16:03:36

标签: jquery css html

我不认为这是可能的,但我认为这是最后的诉求

让我们举一个简单的例子,假设你有一些DIV堆叠在一起,如下所示:display

XXXXXXXXXXX1
XXXXXXXXXXX2
XXXXXXXXXXX3
XXXXXXXXXXX4
XXXXXXXXXXX5
XXXXXXXXXXX6
XXXXXXXXXXX7
XXXXXXXXXXX8
XXXXXXXXXXX9
XXXXXXXXXX10
XXXXXXXXXX11
XXXXXXXXXX12
XXXXXXXXXX13
XXXXXXXXXX14

如果堆叠的div的可变数量高于其容器的高度,它们将以从左到右的列形式包装?例如:

XXXXXXXXXXX1    XXXXXXXXXXX6    XXXXXXXXXX11
XXXXXXXXXXX2    XXXXXXXXXXX7    XXXXXXXXXX12
XXXXXXXXXXX3    XXXXXXXXXXX8    XXXXXXXXXX13
XXXXXXXXXXX4    XXXXXXXXXXX9    XXXXXXXXXX14
XXXXXXXXXXX5    XXXXXXXXXX10

我需要每个div独立移动,所以使用容器div作为列是不是真的可能或优雅的不强迫div的包装并允许在容器上水平滚动?

我认为在很多方面,当将项目作为列表查看时,这与Windows资源管理器的行为相同。

现在,我意识到有一些CSS3属性可以帮助解决这个问题 - 但我想知道是否有跨浏览器的方式,无论是纯CSS还是jquery等。

我欢迎你的想法。

此致

学家

1 个答案:

答案 0 :(得分:2)

所以看看你需要什么,你可以使用jquery来完成这个

这里有一个例子http://jsfiddle.net/h8Bqw/4/

var height = $(".container").height();
var count = 1;
$(".outPut").append("<div class='row r"+count+"'></div>");

$(".container div").each(function(index) {
    $(".r"+count).append($(this));


     if($(".r"+count).height() > height){
         count++;
         $(".r"+count).remove($(this));
        $(".outPut").append("<div class='row r"+count+"'></div>");
        $(".r"+count).append($(this));
        }