本文介绍如何使用 css 媒体查询和现代布局技术，实现文本与图片在宽屏下左右并排（各占约 50%）、窄屏下垂直堆叠且整体居中的响应式布局，并确保文本宽度受限于 750px、右对齐、自适应换行。
要实现“宽屏并排、窄屏堆叠+居中”的响应式效果，不推荐依赖 Float 或内联样式，而应采用语义清晰、可维护性强的 css 方法。核心思路是：默认将两个区域设为块级堆叠布局（窄屏优先），再通过 @media 查询在较大视口下切换为 inline-block 或更优的 flexbox 布局。
以下是推荐的完整实现（含 html 结构优化与 CSS）：
这是一段需要转录的文字内容。它可能较长，但不应超过最大宽度限制；自动换行确保在小屏幕上依然可读。 @@##@@ /* 重置与基础样式 */ #wrapper { background-color: #ffe6e6; /* 浅红，便于调试 */ padding: 1rem; margin: 0 auto; } #left-side, #right-side { background-color: #e6f2ff; /* 浅蓝，区分区域 */ margin-bottom: 1rem; padding: 1rem; } /* 默认状态（窄屏）：垂直堆叠 + 居中 */ #left-side, #right-side { width: 100%; max-width: 750px; margin-left: auto; margin-right: auto; } #text { max-width: 750px; min-width: 250px; background-color: #ffe0b3; /* 橙色背景便于识别 */ padding: 0.75rem; text-align: right; word-break: break-word; /* 更可靠地处理长单词/URL */ margin: 0 auto; /* 确保在父容器中水平居中 */ } /* 宽屏响应式：并排显示（≥1200px）*/ @media (min-width: 1200px) { #wrapper { text-align: center; /* 为 inline-block 对齐准备 */ } #left-side, #right-side { display: inline-block; vertical-align: top; width: 49%; /* 留 2% 间隙防换行，也可用 flex 替代 */ margin-bottom: 0; } #left-side { text-align: right; } #right-side { text-align: left; } /* 确保 #text 在并排时仍右对齐其容器 */ #text { margin: 0; text-align: right; } }✅ 关键要点说明：
- 移动优先：默认样式适配小屏幕（堆叠+居中），符合现代 Web 开发最佳实践；
- 避免 float：float 易引发清除问题且不利于响应式控制，inline-block 或 flexbox 更可控；
- max-width: 750px + margin: 0 auto 是实现“文本不超宽且居中”的黄金组合；
- word-break: break-word 比 overflow-wrap: break-word 兼容性更广，尤其对中英文混排更稳妥；
- 媒体断点建议设为 1200px（而非 1500px），覆盖主流平板与桌面设备，兼顾实用性与兼容性；
- 如需更高灵活性，可进一步升级为 display: flex 布局（#wrapper { display: flex; flex-wrap: wrap; }），但当前方案已足够简洁稳健。
最终效果：在桌面端，文字与图片左右平分空间，文字右对齐其所在区域；在手机或小平板上，二者垂直堆叠，整体居中且宽度自适应（≤750px），阅读体验一致、专业且无障碍。
