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

发布于 2024-10-09 05:35:49 字数 931 浏览 4 评论 0原文

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

我现在想做的是准确计算适合主体宽度的元素数量。我想计算它们之间的边距，以便元素从开始到结束具有完全相同的边距。现在我刚刚在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;
}

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();

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

有什么想法吗？谢谢

原文

i have a bar in my footer called #elementbar.
i want this elementbar to have 30px wide colored squares in it. And those sqaures should have a margin between them around 10px.

what i wanna do now is calculate exactly the amount of elements that would fit in the width of the body. and i want to calculate the margin between them so the elements have exactly the same margin from start to end. now i have just manually set the margin in css but in this case very first element has a slightly different distance to the browseredge than the last one.

is there mathematical solution to calculate the fitting elements as well as the appropriate margin between them (the margin should always be around 5px to 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();

later i want also to call the function on resize so that whenever you resize the browser the appropriate number of elements gets appended to the elementbar.

any ideas? thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薔薇婲 2024-10-16 05:35:49

<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/

<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);

See it in action: jsfiddle.net/s4MGT/

回复收藏 0 原文

~没有更多了~