javascript - 如何在数据增加时自动扩展宽度和高度

Question

我有一个带有 <div> 的 jsp 页面标签和 CSS 样式。其实我给了<div>将宽度标记为 300px，将高度标记为 100px。但是，当从数据库中获取大量数据时，超出了我提到的宽度和高度，并且溢出或与其他数据合并 <div>标签。我将展示一张图片以便更好地理解。

在下图中，您可以看到数据的某些部分被其他部分数据覆盖，而某些部分超出了边界。所以我的问题是如果有大量数据，如何自动增加字段的宽度和高度，这样它就不会被碰撞或覆盖。
我使用的代码如下所示。

 #div7{
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            width: 278px;
            height: 40px;
            float: left;
            display: inline-block;
            }
            #div8{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
            border-right: 1px solid black;
            display: inline-block;
            width: 328px;
            float: left;
            height: 40px;
            }

<div id="div7">&nbspWorks Address: Same As Above</div>
<div id="div8">&nbspTerms Of Delivery :- <%= termsofdelivery%><br/>
               &nbspAttention :- <%= attention %></div>

Answer 1

您可以将宽度和高度设置为自动，

#id-of-element{

         width:auto;
         height:auto;

}

或者如果您需要将它们固定在特定宽度。您可以将两个容器都设置为特定百分比。

#div1{

    width:50%;

}

#div2{

     width:50%;
}