我的页脚中有一个名为#elementbar 的栏。 我希望这个 elementbar 中有 30px 宽的彩色方 block 。这些正方形之间应该有大约 10px 的边距。
我现在想做的是准确计算适合 body 宽度的元素数量。我想计算它们之间的边距,以便元素从头到尾具有完全相同的边距。现在我只是在 css 中手动设置边距,但在这种情况下,第一个元素与浏览器边缘的距离与最后一个元素的距离略有不同。
是否有数学解决方案来计算拟合元素以及它们之间的适当边距(边距应始终在 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;
}
j查询:
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();
稍后我还想在调整大小时调用该函数,以便无论何时调整浏览器大小时,适当数量的元素都会附加到元素栏。
有什么想法吗?谢谢
最佳答案
<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'> </span>");
}
$('.block').css({ marginRight: margin + 'px'});
$('.block:last').css({ marginRight: '0px'});
$(".debug")
.append("Width: " + bw +
", marginRight: " + margin +
", number: " + num);
查看实际效果:jsfiddle.net/s4MGT/
关于jquery:计算拟合 div 的数量和它们之间的边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4508561/