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

Question

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

这是它的样子：

在第三个元素之后，间距就像上面的图像（它不会变为负数）。我的问题有两个：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>

这是我的CSS：

.label
{
    width:20px;
}

.table
{
    font-size: 1.2em;
}
#main
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    width:97%;
    height:900px;
    margin:auto;
    overflow: auto; 
    white-space: nowrap;

}
#calendar
{
    padding:1%;

}
.column
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    min-width:10%;
    max-width:100%;
    height:800px;
    display: inline-block;
    overflow: auto;
    padding:10px;


}
.header
{
    padding:0;
    margin:0;
    text-align: center; 
    font-style: bold; 
}

.truck
{
    width:200px;
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    display:inline-block;
    margin:0px;


}

.column#time_slots
{
    width:5%;
    min-width:5%;
    max-width: 10%; 
}
.date
{
    text-align: center;
    width:100%;
}
.column button
{
    display:block;
    width:100%;
    width:100%;
    border-style: solid;
    border-width: 1px;
    border-color: black; 
}

这是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"); 
   });

以下是演示：http://jsfiddle.net/pfdNy/