如何让左侧长表格自动填充右侧较短相邻表格下方的空白区域

解决方案 #

你当前布局的核心问题是给左侧容器设置了固定宽度和左浮动，把左侧表格限制在了页面左侧60%的区域内，同时清除浮动的规则也限制了内容的延伸范围，仅需要修改几处CSS样式即可实现需求，无需调整HTML结构：

1. 移除#left_div的浮动、宽度、无效的wrap属性，让它恢复为常规块级元素，自动填充可用空间
2. 保留右侧容器的右浮动和宽度设置
3. 将清除浮动的规则改为清除两侧浮动，保证后续正文内容不会出现在两个表格中间
   修改后的完整CSS代码如下：

table {
  border: 1px solid black;
  border-collapse: collapse;
}
table td {
  border: 1px solid black;
  padding: 0.0rem 0.25rem 0.0rem 0.5rem;
}
table tr:nth-child(odd) { background-color: #edf0f0; }
#left_div {
  /* 移除原有的float: left、wrap:inline、width: 60%即可 */
}
#right_div {
  float: right;
  clear: right;
  width: 39%;
}
#clear_left {
  clear: both; /* 把原来的clear: left改成clear: both */
}

实现逻辑 #

右浮动的#right_div会脱离常规文档流停靠在页面右侧，没有固定宽度的常规块级元素#left_div会自动环绕浮动元素：在右侧容器的高度范围内，左侧容器自动占满剩余的左侧宽度，等右侧容器的高度结束后，左侧容器就会自动延伸到整行宽度，刚好填充右侧表格下方的空白区域，同时clear: both的规则会保证后续的正文内容全部显示在两个表格的下方。

内容的提问来源于stack exchange，提问作者Victoria Stuart