javascript - Div 没有正确排列

Question

我有以下 HTML：

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

        <div class="column" id="day1">
            <div class="route_container">
                <div class="date"></div>
                <button class="add_route" name="add_route" onclick="">Add New Route - 1</button>
                <div class = "truck" id="day1_route1">
                    <div class="ts8-10">J Smith</div>
                    <div class="ts10-12">10-12 AM</div>
                    <div class="ts12-2">12-2 AM</div>
                    <div class="ts2-4">2-4 AM</div>
                    <div class="ts4-6">4-6 AM</div>
                </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;

}
h2
{
    font-size: 24px;
}
#calendar
{
    padding:1%;

}
.column
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    min-width:10%;
    max-width:100%;
    width:17%;
    height:1000px;
    display: inline-block;
    overflow: auto;
    padding:5px;
    font-size: 0px;
}
.header
{
    padding:0;
    margin:0;
    text-align: center; 
    font-style: bold; 
}
.route_container
{
    height:100%;
    display: inline-block;
    font-size: 0px; 


    border-style: solid;
    border-width: 1px;
    border-color: black; 
    min-width:10%;
    max-width:100%;
    width:100%;
    overflow: auto;
    padding:5px;
    font-size: 0px;
}
.truck
{
    width:275px;
    height:100%;
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    display:inline-block;
    margin:auto;
    font-size: 16px;
    padding:2%;

    position: relative;
}

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

.ts8-10, .ts10-12, .ts12-2, .ts2-4, .ts4-6
{
    border-style: solid;
    border-width: 1px;
    border-color: black; 
    width:90%;
    height:20%;
    font-size: 28px; 
    text-align: center;
    padding:5px;    
}

我正在使用以下 Javascript 添加另一个 div：

$(".add_route").click(function(){
        var truck = $(this).parent().find('.truck').length
        truck += 1; 
        var w = $(this).parent().width();
        $(this).parent().animate({width:(w+405)}, 1000);
        $(this).parent().parent().animate({width:(w+425)}, 1000);
        $(this).parent().append('<div class = "truck" id="'+$(this).parent().parent().attr('id')+'_route'+truck+'"><p>There are '+ truck +' routes</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().parent().css("padding", "5px"); 
        console.log($(this).parent().parent().css("padding", "5px"))
        $(this).parent().find('.truck').css("margin-right", "3px"); 
   });

我得到以下结果：

如您所见，添加的 div（带有“有 2 条路线”的那个）比另一个 div 低很多。更糟糕的是，当我通过扩展 div（ts8-10 等）和边框来更改此 HTML 的内容时：

<div class = "truck" id="day1_route1">
                    <div class="ts8-10">J Smith</div>
                    <div class="ts10-12">10-12 AM</div>
                    <div class="ts12-2">12-2 AM</div>
                    <div class="ts2-4">2-4 AM</div>
                    <div class="ts4-6">4-6 AM</div>
                </div>

偏移量要差得多。它实际上位于第一个 div 的底部（带有 JSmith 的那个）。

我知道这些被设置为“内联块”并且我已经尝试进行调整，如您所见，似乎没有任何效果。我已检查以确保没有额外的边距或填充问题，至少在我使用 Chrome 网络开发工具时没有显示。

有人能告诉我这里发生了什么吗？我究竟做错了什么？我怎样才能解决这个问题？

Answer 1

inline-block项目根据vertical-align属性对齐，默认为baseline. 添加vertical-align:top;到.truck.

（这是一种比使用table-cellhack 更灵活、更直观的解决方案。inline-block之后仍然会按照您的预期运行。）

Answer 2

在 css 中将显示：inline-block 更改为 table-cell，它将起作用

.truck
{
  width:275px;
  height:100%;
  border-style: solid;
  border-width: 1px;
  border-color: black; 
  /*display: inline-block;*/

  display: table-cell;

  margin:auto;
  font-size: 16px;
  padding:2%;
  position: relative;
}