DIV的不排隊正確

我有以下HTML：DIV的不排隊正確

<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另一格：

$(".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"); 
    });

我得到以下結果：

enter image description here

正如您所看到的，添加的div（「有2條路線」的那個）比其他div低很多。更糟糕的是，當我改變這個HTML的內容，通過擴大申報單（ts8-10等）和邊界：

<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網絡開發工具時不會顯示任何內容。

有人能告訴我這裏發生了什麼嗎？我究竟做錯了什麼？我怎樣才能解決這個問題？

來源

2013-10-29 BlackHatSamurai

如上評論，這裏是一個小提琴http://jsfiddle.net/epZts/ – luke2012

你可以縮小這個問題嗎？這個css牆讓我害怕。 – dezman

你基本上是在一個臨時表格外面，這是很多工作。只需使用一張桌子。 –

在CSS變化顯示：內聯塊表單元，它將工作

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

來源

2013-10-29 23:17:17 jforjs

inline-block項是基於vertical-align屬性，默認爲baseline對準。將vertical-align:top;添加到.truck。

（這比使用table-cell黑客更靈活，直觀的解決方案。因爲你希望它以後inline-block仍將表現。）

來源

2013-10-29 23:28:03 XML

DIV的不排隊正確

回答

相關問題