jquery – 如何让无限量的div显示在彼此旁边

我正在努力实现让无限量的div彼此相邻的可能性,但我根本就没有想法.

容器div有一个固定的宽度,如下所示：

#container {
    width: 800px;
}

现在,html可能看起来像这样

<div id="container">
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    etc etc etc
</div>

如果纯CSS无法实现,那么如何使用jQuery实现这种功能呢？

我忘了告诉div的行为.当有2个div时,它们都应该占50％,如果有4个,它们应该占25％.这是预期的行为.

解决方法

查看此 fiddle以获得99.9％的工作解决方案.您可以动态计算div的宽度并进行设置.然而,一个div元素变得太小,数学将开始打破,但这只是当div开始变得小于大约13px时.不确定你的div会变得多么小.有趣的是,由于css舍入,这实际上并没有给每个div完全相同的宽度.所以我们需要做的是获取剩余的像素,并将它们均匀地分布在尽可能多的div中.

编辑,这是代码

var divnum = 0;

function ranColor() {
    var col = '#'+Math.floor(Math.random()*16777215).toString(16);
    return col;
}

$("#addDiv").click( function() {
    divnum++;
    $(".container").append("<div id='div"+divnum+"'>"+divnum+"</div>");
    $("#div"+divnum).css("background-color",ranColor());
    var size = $(".container").children().size();
    var width = Math.floor($(".container").width()/size);

    $(".container").children().css("width",width+"px");

    var leftover = ($(".container").width()-width*divnum).toFixed(0);

    while ( leftover > 0 ) {
        var theDiv = $(".container").find("div").eq(leftover%size);
        var divwidth = $(theDiv).width();
        $(theDiv).css("width",divwidth+1);
        leftover--;
    }
});