javascript - 使用 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/