jquery - 水平等间距未知数量的图像

Question

不管添加了多少点，我希望它们在一条线上等距分布，而不是超过线的宽度。这是我到目前为止所拥有的，在添加太多图像之前可以正常工作，然后它们就会过去。

var count = $('#dots img').length;
var dotW = $('.dot').width();
var line = $('#line').width();

var x = count * dotW;
var y = line - x;
var z = y / (count + 1);

$('.dot').css('margin-left', z);

查看jsfiddle。 http://jsfiddle.net/kirkr/2L9eg/ 复制并粘贴图像标签以测试更多。

我错过了什么？

谢谢。

Answer 1

您的问题是图像之间的空白。使用这个 CSS：

#dots {
    font-size: 0;
}

它工作正常。

编辑：

玩了一下。如果需要，您可以用图像替换 div。请务必从图像中删除尽可能多的空白。

http://jsfiddle.net/2L9eg/6/

Answer 2

您的计算很好，是 HTML 中的空白导致空间超出预期。

这是img标签之间没有空格的版本。

Answer 3

只需在页面加载每个“点”后应用具有所需属性（可能是边距）的 css 类。IE：

$(document).ready(function() {
    $(".dot").css("margin-right","10px");
});