水平等间距未知数量的图像答案

【问题标题】：Equally space unknown number of images horizontally水平等间距未知数量的图像
【发布时间】：2013-02-20 09:24:14
【问题描述】：

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

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/ 复制并粘贴图像标签以进行更多测试。

我错过了什么？

谢谢。

【问题讨论】：

标签： jquery equals centering

【解决方案1】：

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

#dots {
    font-size: 0;
}

而且效果很好。

编辑：

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

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

【讨论】：

这是一个轻微的改进，但是在我的网站上，当我添加 30 多张图片时，它仍然超出了线条的宽度。这是一个应用程序，点代表页面（我不确定会有多少）。
对不起，jimjimmy，页面是本地的，我无法访问工作中的 ftp。太糟糕了，我知道。
问题是边距变成负片，将图像拉到元素之外。
我忘了说我必须使用 Internet Explorer 7 标准。即使修复了错误 { zoom:1; *display:inline } 他们正在制作行。在ie7中工作有希望吗？非常感谢您的帮助。
可以试试var z = Math.floor(y / (count));。在更好的浏览器上效果不佳，但可以修复 IE。由于某种原因，IE 不喜欢 ie7standards 模式下的 jsFiddle，否则我会对其进行测试。我并没有真正为 IE 开发，所以我真的帮不上什么忙。对不起：/

【解决方案2】：

您的计算没有问题，是 HTML 中的空白导致空间超出预期。

Here's a version without whitespace between theimg tags.

【讨论】：

【解决方案3】：

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

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

【讨论】：

我尝试将结果除以 2 并将该变量设置为 bot 左右边距，但没有运气