javascript - Javascript で追加された要素の間隔が一貫していない

Question

要素を別の要素に動的に追加していますが、間隔に矛盾があります。追加する要素が多いほど、間隔が狭くなります。

これは次のようになります。

3番目の要素以降、間隔は上の画像のようになります(マイナスにはなりません)。私の質問は 2 つあります。1. なぜこれが起こっているのか。2. どうすれば修正できますか?

注意点として、デフォルトのレイアウトには要素が 1 つあり、「新しいルートを追加」ボタンをクリックすると、別のルートが追加されます (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/