当前位置 : 主页 > 网页制作 > JQuery >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
我正在努力实现让无限量的div彼此相邻的可能性,但我根本就没有想法. 容器div有一个固定的宽度,如下所示: #container { width: 800px;} 现在,html可能看起来像这样 div id="container" div class="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--;
    }
});
网友评论