jquery - 尝试使用 jQuery 在 中水平分布不同大小的元素

Question

我正在尝试使用 jQuery 将这些元素均匀地分开。正如您所看到的，我将对象的宽度相加并减去周围 DIV 的宽度以找到空白空间。然后，我将该空白空间分开，并将每个元素按该数量分隔开(通过右边距)。这是 JSFiddle:http://jsfiddle.net/spaceninja/baQNA/

我的问题是(注意:我将此作为一个学习机会，因为我知道还有其他方法可以做到这一点)为什么我必须在下面的行中减去 4 才能使其工作？我认为执行 Math.floor 足以将其四舍五入，但仍有大约 4 个像素将其分解为下一行。如果您从以下行中取出 -4，它就会中断，我不知道为什么。

var spacer = (Math.floor(剩余/4) -4 );

这是 HTML:

<div>
    <span>Short</span>
    <span>A Very Very Long One Is Right Here</span>
    <span>Short</span>
    <span>Short</span>
    <span>Short</span>        
</div>

这是 jQuery:

var measurements = 0;
for (var i=0; i<=4; i++) {
    measurements += $('span').eq(i).width();
}
var totalWidth = $('div').width();
var remaining = 0;
remaining = totalWidth - measurements;
var spacer = (Math.floor(remaining / 4) -4 );
for (var i=0; i<=3; i++) {
    $('span').eq(i).css('margin-right', spacer);
}

Answer 1

这是你的跨度之间存在空格字符的原因

<div><span>Short</span><span>A Very Very Long One Is Right Here</span><span>Short</span><span>Short</span><span>Short</span></div>

http://jsfiddle.net/r043v/baQNA/7/