Javascript 在两个现有图元之间放置并安装n个图元

有两个固定宽度的元素（单位%）

第一个元素位于

左侧：0

，第二个元素位于

右侧：0

需要在这两个元素之间追加N个元素，这样每个新追加的元素都具有相同的宽度（取决于主元素之间的可用空间）

问题在于新元素的位置不准确（相互交叉或在它们之间留出一些额外的空间），并且与不同浏览器的窗口大小不一致

请帮忙

我知道不同的浏览器将提供不同的输出，但此脚本将仅限于Google Chrome使用。

尝试以下操作：

$(document).ready(function() {
    for (var i = 0; i < 9; i++) {
        $('<div/>').appendTo('body')
    }
    $(window).resize(function() {
        var firstWidth = $('#element-0').width();
        var r = ($(window).width() - (firstWidth * 2) - 2) / 9;
        $('div').slice(2, 11).each(function(i) {
            $(this).css({
                left: i == 0 ? firstWidth : firstWidth + r * (i),
                width: r
            })
        })
    }).resize() 
});​

$（文档）.ready（函数（）{
对于（变量i=0；i<9；i++）{
$（''）.appendTo（'正文'）
}
$（窗口）。调整大小（函数（）{
var firstWidth=$（'#element-0'）.width（）；
var r=（$（窗口）.width（）-（firstWidth*2）-2）/9；
$（'div'）。切片（2，11）。每个（函数（i）{
$（this.css）({
左：i==0？第一宽度：第一宽度+r*（i），
宽度：r
})
})
}).resize（）
});​

---

不久前我也有类似的要求。在不质疑或改变策略/代码的情况下，这里有一把小提琴，尽我所能展示： （请注意，我没有考虑调整大小，因为您的原始代码没有这样做）

width（）jquery函数将解决的问题。所以你的数学总是有点不对劲。我通过使用window.innerWidth上的计算改进了这一点，由于浮点宽度的原因，它将有点不对齐。使用浮点宽度进行像素完美对齐不是一条可行之路

如果您想要完美对齐，请使用填充。下面是一个使用尽可能小的填充的示例：

---

如果您不需要边框，那么数学计算就容易多了。

没有添加

$（window）.resize（）

，因此每次更改浏览器的窗口大小时，您都需要运行脚本来查看问题。这很有效。但边界仍在跨越，寻找第一个和最后一个要素。谢谢，但在代码中，元素的位置也不一致。请参阅元素-1和9被移位。元素的位置不一致，因为您使用的是浮点像素。我更新了我的答案，加入了一个使用填充的像素完美布局示例：现在我依赖于边框宽度。没关系，我稍后会发布我的独特解决方案。是的，因为数学会有所不同。抱歉，刚意识到您想要的是非重叠：仍然不一致。框之间的空格从左到右不同。