jQuery - 在一行上均匀分配项目

Question

我试图找到一种方法在一条线上均匀分配一组项目。 我的理论是

• 如果我将项目的outerWidth加起来
• 然后从容器的innerWidth中减去它
• 将余数除以项目-1的数字
• 将余数作为margin-left应用于除第一项以外的所有项目

但它不起作用，最后一项被推到下一行。我错过了什么吗？

//example
<style>
    #outer { width:100%; border: 2px solid black; }
    .inner {width:250px; border: 2px solid red; display:inline-block; }
</style>

<script>
    $(document).ready(function()
        {
            outerWidth = $('#outer').width();
            oneWidth = $('#one').outerWidth(true);
            twoWidth = $('#two').outerWidth(true);
            threeWidth = $('#three').outerWidth(true);

            remainder = outerWidth - (oneWidth + twoWidth + threeWidth);
            marginToAdd = remainder / 2;

            $('.addto').css({marginLeft:marginToAdd+'px'});
        })
</script>

<div id="outer">
    <div id="one" class="inner">One</div>
    <div id="two" class="inner addto">Two</div>
    <div id="three" class="inner addto">Three</div>
</body>