如何使用 CSS 媒体查询实现表格布局在移动端的垂直堆叠-html教程-PHP中文网

如何使用 CSS 媒体查询实现表格布局在移动端的垂直堆叠

本文介绍如何通过媒体查询将基于 display: table 的左右并排布局，在移动设备上优雅地切换为上下垂直堆叠，无需修改 HTML 结构，仅用纯 CSS 实现响应式适配。

本文介绍如何通过媒体查询将基于 `display: table` 的左右并排布局，在移动设备上优雅地切换为上下垂直堆叠，无需修改 html 结构，仅用纯 css 实现响应式适配。

在响应式网页开发中，常需兼顾桌面端的横向信息展示与移动端的纵向阅读习惯。原始方案使用 display: table 模拟表格布局，并借助 position: absolute 让右侧图片自适应左侧文本高度——虽在宽屏下表现良好，但在窄屏（如手机）上会因绝对定位脱离文档流、宽度固定而造成内容重叠或截断。

解决的关键在于：放弃在小屏幕下维持表格行为，转而回归标准块级流布局。具体做法是利用 CSS 媒体查询，在视口宽度 ≤ 768px 时，重置容器及子元素的显示模式与定位方式：

/* 基础桌面端样式 */
.container-article {
  display: table;
  width: 100%;
  position: relative;
}

.left {
  width: 50%;
  display: table-cell;
  vertical-align: top;
}

.right {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow-y: auto;
}

/* 移动端响应式覆盖 */
@media (max-width: 768px) {
  .container-article {
    display: block; /* 关闭 table 行为，恢复普通块容器 */
  }

  .left,
  .right {
    display: block;      /* 强制块级显示 */
    width: 100%;         /* 占满父容器宽度 */
    position: static;    /* 清除绝对定位，回归文档流 */
    left: auto;
    top: auto;
    height: auto;        /* 允许内容自然撑高 */
    margin-bottom: 1rem; /* 可选：添加间距提升可读性 */
  }
}

⚠️ 注意事项：

CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

position: absolute 在移动端必须被显式重置为 static 或 relative，否则 .right 仍会脱离流、无法随 .left 自然换行；

原 .right 的 height: 100% 在 display: block 下失效（因父容器高度不再由 table-cell 决定），故需设为 auto，依赖内容实际高度；

若需保持图片宽高比，建议为 <img> 添加 width: 100%; height: auto;，避免拉伸变形；

768px 是常见平板断点，可根据项目需求调整为 576px（手机主流宽度）或使用 max-width: 480px 等更精细阈值。