jquery：计算拟合 div 的数量和它们之间的边距？

Question

我的页脚中有一个名为#elementbar 的栏。 我希望这个元素栏有 30px 宽的彩色方块。这些正方形之间应该有大约 10 像素的边距。

我现在想做的是准确计算适合身体宽度的元素数量。我想计算它们之间的边距，以便元素从头到尾具有完全相同的边距。现在我刚刚在 css 中手动设置了边距，但在这种情况下，第一个元素到 browseredge 的距离与最后一个元素的距离略有不同。

是否有数学解决方案来计算拟合元素以及它们之间的适当边距（边距应始终在 5px 到 10px 左右）

#elementbar {
    overflow:hidden;
    height:15px;
    bottom:0px;
    position:fixed;
    text-align:center;
}

#elementbar .element {
    width: 30px;
    height: 15px;
    float:left;
    /*margin:0px 5px 0px 5px;*/
}

#elementbar .element {
    margin:0px;
}

jquery:

function elementbar() {
    var bw = Math.round($('body').width());
    var num = Math.round(bw / 30); //one element is 30px wide
    for (var i=0; i<num; i++) {
        $("#elementbar").append("<div class='element'></div>");
    }
}
elementbar();

稍后我还想在调整大小时调用该函数，以便每当您调整浏览器大小时，适当数量的元素都会附加到元素栏。

有什么想法吗？谢谢

Answer 1

<div class="bar"></div>
<div class="debug"></div>

var bw = $('.bar').width();
var num = Math.floor(bw/40); // Assume 30px width + 10px margin
var margin = Math.floor((bw - num*30)/(num-1));

for (i=0; i<num; i++) {
  $(".bar").append("<span class='block'>&nbsp;</span>");
}       
$('.block').css({ marginRight: margin + 'px'});
$('.block:last').css({ marginRight: '0px'});

$(".debug")
    .append("Width: " + bw +
            ", marginRight: " + margin +
            ", number: " + num);

查看实际操作：jsfiddle.net/s4MGT/