本文介绍如何通过媒体查询将基于 display: table 的左右并排布局（含绝对定位图片）优雅适配移动端，使其在小屏幕下自动转为上下堆叠结构，无需 JavaScript 即可实现真正响应式。

本文介绍如何通过媒体查询将基于 `display: table` 的左右并排布局（含绝对定位图片）优雅适配移动端，使其在小屏幕下自动转为上下堆叠结构，无需 javascript 即可实现真正响应式。

在构建响应式网页时，常需兼顾桌面端的横向信息密度与移动端的纵向阅读习惯。原始代码中，.container-article 使用 display: table 模拟表格布局，.left（文本）与 .right（图片）通过宽度分配和绝对定位实现并排显示——这种设计虽在宽屏下表现良好，但因 .right 依赖 position: absolute 和固定 left: 50%，在窄屏下会脱离文档流、重叠或溢出，无法自然换行。

解决的关键在于放弃在小屏下维持表格语义，转而用媒体查询覆盖原有布局逻辑：当视口宽度 ≤ 768px 时，将容器设为 display: block，并重置子元素为常规块级流式布局。

以下是优化后的完整 CSS 方案：

CSS婚礼策划服务机构宣传网站模板

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

下载

.container-article {
  display: table;
  width: 100%;
  position: relative;
}

.left {
  width: 50%;
  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; /* 移除表格显示模式 */
  }

  .left,
  .right {
    display: block;
    width: 100%;
    position: static; /* 覆盖 absolute，回归文档流 */
    left: auto;
    top: auto;
    height: auto;
    margin-bottom: 1rem; /* 可选：添加间距提升可读性 */
  }

  /* 若需图片自适应宽度，建议额外添加 */
  .right img {
    max-width: 100%;
    height: auto;
  }
}

✅ 注意事项与最佳实践：

• 断点值 768px 是常见平板阈值，可根据实际设计稿调整（如 640px 或 576px）；
• position: static 比 position: relative 更安全，避免意外触发新层叠上下文；
• 绝对定位在响应式中易引发维护难题，长期建议改用 Flexbox 或 Grid（例如 display: flex; flex-direction: column 配合 @media 切换），但本方案完美兼容现有结构，零侵入升级；
• 图片务必设置 max-width: 100%; height: auto，防止横向溢出。

该方案简洁、可靠，仅靠纯 CSS 即完成布局形态的智能切换，是传统表格模拟布局向现代响应式演进的轻量过渡方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！