html - 填充相邻表格单元格中显示的 div 中的空白空间以最小化空白空间

Question

假设我有一个基本的 div 布局，如下所示，其中 div A 和 div B 在包含的 div 中显示为表格单元格设置为 display:table。

这对于将 div A 和 B 的高度与最高 div 的内容高度相匹配非常有用，但是在这个特定站点上使用此结构作为模板的许多页面中，div 的主要文本内容B 在某些页面上可能很大，而在其他页面上则短得多。

有没有一种方法可以计算 div A 下面的空白区域的高度，并使用它来动态添加 x 个 div C(可以是固定高度 div 中的数据库驱动的动态内容)以尽可能少地保留尽可能在原div A下留空？

Answer 1

我会简单地使用 <table>而不是 <div> .

rowspan="2"将覆盖从左到右的 2 个空格(跨越一行中的列)和 colspan="2"将覆盖上下 2 个空格(跨越一列中的行)。这需要在您的 <td> 中使用标记... <td colspan="2">Content</td>