当使用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; 
    }