Question

我的页脚中有一个名为#elementbar的栏。我希望这个元素栏中有30px宽的彩色方块。这些平方应该在它们之间有10px左右的差距。

我现在要做的是精确计算适合身体宽度的元素数量。我想计算它们之间的余量，以便元素从头到尾具有完全相同的余量。现在我只是在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/

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

1 个答案: