當使用Javascript添加內容時，使HTML div擴展

Question

我知道還有其他問題可以解決這個問題，但它們不適合我。

我有一個<div class="column">和div裏面有另一個div叫<div class="truck">。現在將出現一個按鈕，將爲column div添加其他「卡車」列。當我添加一輛新卡車時，我希望列div擴大。就目前而言，增加了額外的卡車，但要查看另一輛卡車，我必須滾動到左側。我想要添加每輛新卡車時擴大列。下面的代碼沒有我所指的那個按鈕，因爲我現在正在爲每列添加下一輛卡車。

這裏是我的HTML代碼：

<div id="main"> 
    <div id="calendar"> 
     <div class="column" id="day1"> 
      <div class = "truck" id="day1_truck1"> 
       <p>This is truck one</p> 
      </div> 
     </div> 

     <div class="column" id="day2"> 
      <div class = "truck" id="day2_truck1"> 
       <p>This is truck one</p> 
      </div> 
     </div> 

     <div class="column" id="day3"> 
      <div class = "truck" id="day3_truck1"> 
       <p>This is truck one</p> 
      </div> 
     </div> 

     <div class="column" id="day4"> 
      <div class = "truck" id="day4_truck1"> 
       <p>This is truck one</p> 
      </div> 
     </div> 

     <div class="column" id="day5"> 
      <div class = "truck" id="day5_truck1"> 
       <p>This is truck one</p> 
      </div> 
     </div> 

     <div class="column" id="day6"> 
      <div class = "truck" id="day6_truck1"> 
       <p>This is truck one</p> 
      </div> 
     </div> 

     <div class="column" id="day7"> 
      <div class = "truck" id="day7_truck1"> 
       <p>This is truck one</p> 
      </div> 
     </div> 
    </div> 
</div> 

這裏是CSS：

#main 
{ 
    border-style: solid; 
    border-width: 1px; 
    border-color: black; 
    width:97%; 
    height:900px; 
    margin:50px, auto, 10px, auto; 
    padding: 1%; 
    overflow: auto; 
    white-space: nowrap; 

} 
#calendar 
{ 

} 
.column 
{ 
    border-style: solid; 
    border-width: 1px; 
    border-color: black; 
    min-width:12%; 
    max-width:100%; 
    width:auto; 
    height:800px; 
    display: inline-block; 
    margin-left:1%; 
    overflow: auto; 

} 
.header 
{ 
    padding:0; 
    margin:0; 
    text-align: center; 
    font-style: bold; 
} 

.truck 
{ 
    width:80%; 
    border-style: solid; 
    border-width: 1px; 
    border-color: black; 
    display:inline-block; 
} 

這裏是什麼樣子：

你可以看到，額外的卡車div被切斷。在這裏，您可以滾動查看它，但我希望顯示兩個div。

我在做什麼錯？我試圖溢出從這些鏈接設置爲hidden和其他建議：

make div's height expand with its content

Make non-wrapping div expand when content overflows the page

我也試着從幾個其他網站一對夫婦的其他東西。

任何幫助，將不勝感激。我知道這可以用Javascript來完成，但我很確定它可以在沒有它的情況下完成。如果Javascript是我唯一的選擇，那很好，我只是想我會盡量避免它，因爲在HTML/CSS中做它會更簡單。

Answer 1

因此，您是否試圖將新卡車列放在同一列或其下方的其他卡車旁邊？

如果你想在div去(DEMO)旁邊的前一個改變你.truck CSS代碼這樣：

 .truck 
    { 
     width:auto; 
     border-style: solid; 
     border-width: 1px; 
     border-color: black; 
     display:inline-block; 
    } 

爲了使其下方後，改變.truck CSS來此：

.truck 
    { 
     width:auto; 
     border-style: solid; 
     border-width: 1px; 
     border-color: black; 
     display:block; 
    }