사업부의의는 일렬로 늘어서하지 제대로

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;  
} 

나는 다음과 같은 자바 스크립트와 다른 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 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의 (ts8-10 등) 및 테두리를 확장하여 HTML의 내용을 변경할 때, 설상가상으로. 실질적으로 첫 번째 div (JSmith를 사용하는 div)의 맨 아래에 있습니다.

나는 이것들이 "인라인 블록"으로 설정되어 있음을 알고 있으며 조정할 수 있도록 시도했다. 아무 것도 작동하지 않는 것으로 보인다. Chrome 웹 개발자 도구를 사용할 때 최소한 여백이나 패딩 문제가 없는지 확인했습니다.

누군가 여기서 무슨 일이 일어 났는지 말해 줄 수 있습니까? 내가 도대체 ​​뭘 잘못하고있는 겁니까? 이 문제를 어떻게 해결할 수 있습니까?

CSS의 변화

Answer 1

표시 표 셀 인라인 블록을, 그것은

.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; 
} 

Answer 2

inline-block 항목되는 디폴트 baseline에 vertical-align 속성에 기초하여 정렬되어 작동한다. vertical-align:top;을 .truck에 추가하십시오.

는 (이것은 table-cell 해킹을 사용하는 것보다 더 유연하고 직관적 인 솔루션입니다. 당신은 그 이후에 예상대로 inline-block 여전히 작동합니다.) 코멘트 이상으로