本文介绍一种基于 css 媒体查询的响应式方案，使左右两个区块（左侧为限制宽度的右对齐文本，右侧为自适应图片）在大屏幕下水平并排（各占约 49% 宽度），在小屏幕下自动转为垂直堆叠且居中显示，兼顾可读性与适配性。
要实现「文本与图片在宽屏下左右并排、窄屏下上下堆叠且整体居中」的响应式布局，关键在于脱离内联样式、合理使用块级/行内块布局 + 媒体查询控制断点。以下是一个结构清晰、语义明确、无 javaScript 依赖的专业解决方案。
✅ 推荐 html 结构（语义化 & 可维护）
这是一段需要保持可读性的文字内容。它不应超过 750px 宽度，在大屏下右对齐于其容器；在小屏下则居中显示，确保移动端阅读体验。 @@##@@ ✅ 对应 css 样式（含响应式断点）
/* 基础重置与容器 */ #wrapper { background-color: #ffebee; /* 浅红背景，便于调试 */ padding: 1rem; margin: 0 auto; } /* 默认状态（窄屏）：垂直堆叠 + 居中 */ #left-side, #right-side { width: 100%; max-width: 750px; margin: 0 auto; text-align: center; } #text { display: inline-block; max-width: 750px; min-width: 250px; background-color: #ffcc80; /* 橙色背景，突出文本区 */ padding: 1rem; text-align: right; word-break: break-word; } /* 宽屏响应式：并排显示（≥1500px）*/ @media (min-width: 1500px) { #left-side, #right-side { display: inline-block; width: 49%; vertical-align: top; margin: 0; } #left-side { text-align: right; } #right-side { text-align: left; } #text { text-align: right; } }? 关键设计说明
- display: inline-block 是实现并排的核心——比 Float 更可控，避免清除浮动问题，且天然支持 vertical-align 对齐；
- max-width: 750px + margin: 0 auto 确保窄屏下文本区块居中，同时不超出最佳阅读宽度；
- 媒体查询断点设为 1500px 是经验性选择（适配 1440p+ 屏幕），你可根据实际设计稿调整（如 1200px 或 min-width: 768px）；
- 图片使用 max-width: 100%; height: auto 保证等比缩放，防止溢出容器；
- 移除所有 内联样式 —— 不仅提升可维护性，也避免 CSS 优先级冲突。
⚠️ 注意事项
- 避免使用 min-width=50%（语法错误，应为 min-width: 50%），且该属性在此场景下并不适用；
- float 在现代布局中已不推荐，尤其与 inline-block 混用易引发不可预期的空白间隙；
- 若需兼容旧版 IE（
通过以上方案，你将获得一个语义清晰、响应灵敏、易于扩展的双栏布局，完美适配从手机到 4K 显示器的各类设备。
