本文介绍如何使用 css 媒体查询和现代布局技术，实现文本与图片在宽屏下左右并排（各占约 50%）、窄屏下垂直堆叠且整体居中的响应式布局，并确保文本宽度受限于 750px、右对齐、自适应换行。
要实现“宽屏并排、窄屏堆叠+居中”的响应式效果，不推荐依赖 float 或内联样式，而应采用语义清晰、可维护性强的 CSS 方法。核心思路是：默认将两个区域设为块级堆叠布局（窄屏优先），再通过 @media 查询在较大视口下切换为 inline-block 或更优的 flexbox 布局。
以下是推荐的完整实现（含 HTML 结构优化与 CSS）：
Work Productivity Word Mail Workflow Helper
下载
构建并排查Microsoft Word邮件合并及DOCX模板工作流，使用合并域、内容控件、文档属性、重复区块、数据等
<div id="wrapper">
<div id="left-side">
<div id="text">
这是一段需要转录的文字内容。它可能较长，但不应超过最大宽度限制；自动换行确保在小屏幕上依然可读。
</div>
</div>
<div id="right-side">
<img src="letter.jpg" alt="手写信件扫描图" style="max-width: 100%; height: auto;">
</div>
</div>/* 重置与基础样式 */
#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），阅读体验一致、专业且无障碍。
