使用Javascript添加的元素的间距不一致

我正在动态地将元素添加到另一个元素中，但间距不一致。我添加的元素越多，间距就越小

下面是它的外观：

在第三个元素之后，间距与上图类似（不会变为负数）。我的问题有两个：1。为什么会发生这种情况；2.我怎么修理它

请注意，默认布局有一个元素，当您单击“添加新路由”按钮时，它会添加另一个路由（有2个，有3个）。我试过将间距和边距设置为负数。我试着在添加新元素后添加评论。我没有主意了

这是我的HTML：

<div id="main">
    <div id="calendar">
    <div class="column" id="time_slots">
    </div>

        <div class="column" id="day1">
            <div class="date"></div>
            <button class="add_route" name="add_route" onclick="">Add New Route</button>
            <div class = "truck" id="day1_route1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day2">
            <div class="date"></div>
            <button class="add_route" name="add_route">Add New Route</button>
            <div class = "truck" id="day2_route1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day3">
            <div class="date"></div>
            <button class="add_route" name="add_route">Add New Route</button>
            <div class = "truck" id="day3_route1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day4">
            <div class="date"></div>
            <button class="add_route" name="add_route">Add New Route</button>
            <div class = "truck" id="day4_route1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day5">
            <div class="date"></div>
            <button class="add_route" name="add_route">Add New Route</button>
            <div class = "truck" id="day5_route1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day6">
            <div class="date"></div>
            <button class="add_route" name="add_route">Add New Route</button>
            <div class = "truck" id="day6_route1">
                <p>This is truck one</p>
            </div>
        </div>

        <div class="column" id="day7">
            <div class="date"></div>
            <button class="add_route" name="add_route">Add New Route</button>
            <div class = "truck" id="day7_route1">
                <p>This is truck one</p>
            </div>
        </div>
        <div class="column" id="time_slots">
        </div>
    </div>
</div>

下面是Javascript：

$(".add_route").click(function(){
        var num = 8;
        var truck = $(this).parent().find('.truck').length
        truck += 1; 
        var w = $(this).parent().width();
        $(this).parent().animate({width:(w+205)}, 1000);
        $(this).parent().append('<div class = "truck" id="'+$(this).parent().attr('id')+'_route'+truck+'"><p>There are '+ truck +'</p></div>');
        $('#'+$(this).parent().attr('id')+'_route'+truck).hide();


        var route_num = $(this).parent().find('.truck').length;
        var route_w = (100/route_num)-1;



        $('#'+$(this).parent().attr('id')+'_route'+truck).fadeIn(200);

        $(this).parent().css("padding", "10px"); 
   });

$（“.add_route”）。单击（函数（）{
var-num=8；
var truck=$（this.parent（）.find（'.truck'）.length
卡车+=1；
var w=$（this.parent（）.width（）；
$（this.parent（）.animate（{width：（w+205）}，1000）；
$（this.parent（）.append（“有“+truck+”
”）；
$（'#'+$（this.parent（）.attr（'id'）+''u route'+truck.hide（）；
var route_num=$（this）.parent（）.find（'.truck'）.length；
变量route_w=（100/route_num）-1；
$（'#'+$（this.parent（）.attr（'id'）+''u route'+truck）.fadeIn（200）；
$（this.parent（）.css（“padding”，“10px”）；
});

---

这是演示：

你能设置一个演示吗？在（是的，那家星巴克！）上查看区块布局示例也可能会有所帮助。这是一个演示，看起来第一个div添加了一个空格。这是你的答案：谢谢，但这些都不起作用：(

$(".add_route").click(function(){
        var num = 8;
        var truck = $(this).parent().find('.truck').length
        truck += 1; 
        var w = $(this).parent().width();
        $(this).parent().animate({width:(w+205)}, 1000);
        $(this).parent().append('<div class = "truck" id="'+$(this).parent().attr('id')+'_route'+truck+'"><p>There are '+ truck +'</p></div>');
        $('#'+$(this).parent().attr('id')+'_route'+truck).hide();


        var route_num = $(this).parent().find('.truck').length;
        var route_w = (100/route_num)-1;



        $('#'+$(this).parent().attr('id')+'_route'+truck).fadeIn(200);

        $(this).parent().css("padding", "10px"); 
   });