本文介绍如何通过媒体查询将基于 display: table 的左右并排布局（含绝对定位图片）优雅适配移动端，使其在小屏幕下自动转为上下堆叠结构，无需 JavaScript 即可实现真正响应式。
本文介绍如何通过媒体查询将基于 `display: table` 的左右并排布局（含绝对定位图片）优雅适配移动端，使其在小屏幕下自动转为上下堆叠结构，无需 javascript 即可实现真正响应式。
在构建响应式网页时，常需兼顾桌面端的横向信息密度与移动端的纵向阅读习惯。原始代码中，.container-article 使用 display: table 模拟表格布局，.left（文本）与 .right（图片）通过宽度分配和绝对定位实现并排显示——这种设计虽在宽屏下表现良好，但因 .right 依赖 position: absolute 和固定 left: 50%，在窄屏下会脱离文档流、重叠或溢出，无法自然换行。
解决的关键在于放弃在小屏下维持表格语义，转而用媒体查询覆盖原有布局逻辑：当视口宽度 ≤ 768px 时，将容器设为 display: block，并重置子元素为常规块级流式布局。
以下是优化后的完整 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 即完成布局形态的智能切换，是传统表格模拟布局向现代响应式演进的轻量过渡方案。
