如何实现响应式等高并排div布局？现有table布局方案不生效求助

问题原因 #

你原有代码使用table布局实现等高列，在移动端响应式断点下失效的核心原因是：媒体查询仅修改了.col的浮动和宽度属性，没有覆盖父容器的display: table、子元素的display: table-cell属性，table布局规则优先级更高，导致子元素的宽度设置不生效，无法实现纵向堆叠的效果。

可行实现方案 #

推荐使用Flex布局实现，Flex天生支持等高列特性，适配响应式更简单，无需额外JS逻辑。

CSS代码 #

* {
  /* 统一盒模型，避免padding撑开元素宽度 */
  box-sizing: border-box;
}
.col-container {
  display: flex;
  width: 100%;
  /* 如果需要列之间的间距可以修改下方gap值，比如gap: 16px */
  gap: 0;
  flex-wrap: wrap;
}

.col {
  /* 桌面端三等分容器宽度 */
  flex: 1;
  padding: 16px;
}

@media only screen and (max-width: 767px) {
  .col {
    /* 移动端占满全宽，纵向堆叠 */
    flex: 0 0 100%;
  }
}

HTML代码 #

你原有HTML结构无需修改，直接替换CSS部分即可，完整示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      box-sizing: border-box;
    }
    .col-container {
      display: flex;
      width: 100%;
      gap: 0;
      flex-wrap: wrap;
    }
    .col {
      flex: 1;
      padding: 16px;
    }
    @media only screen and (max-width: 767px) {
      .col {
        flex: 0 0 100%;
      }
    }
  </style>
</head>
<body>
  <h2>等高列布局</h2>
  <p>所有列高度自动对齐最高列的高度</p>
  <div class="col-container">
    <div class="col" style="background:orange">
      <h2>列1</h2>
      <p>示例内容</p>
    </div>
    <div class="col" style="background:yellow">
      <h2>列2</h2>
      <p>示例内容1</p>
      <p>示例内容2</p>
      <p>示例内容3</p>
      <p>示例内容4</p>
      <p>示例内容5</p>
    </div>
    <div class="col" style="background:orange">
      <h2>列3</h2>
      <p>其他测试内容</p>
      <p>其他测试内容</p>
    </div>
  </div>
</body>
</html>

实现效果 #

• 桌面端：三列横向并排，自动等高，宽度均分
• 移动端（屏幕宽度小于768px）：三列纵向堆叠，每列占满全宽
• 纯CSS实现，兼容性覆盖所有现代浏览器，支持IE10及以上版本

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