本文介绍一种基于 css 媒体查询的响应式布局方案，让文本容器与图片容器在宽屏下左右并排（各占约 49% 宽度）、窄屏下垂直堆叠且居中显示，同时确保文本区域最大宽度为 750px、右对齐，并适配不同设备尺寸。
要实现「宽屏左右并排、窄屏上下堆叠 + 居中 + 文本宽度受限」的响应式效果，关键在于避免内联样式、合理使用 display: inline-block 或现代布局（如 Flexbox），并配合 @media 查询控制断点行为。下面提供一个结构清晰、语义明确、可维护性强的完整实现方案。
word报告自动生成神器
下载
Word报告自动生成神器。自动生成专业Word文档报告，支持模板填充、目录生成、表格/图表插入、页眉页脚、多级标题、样式主题、批量邮件合并。当用户需要生成Word报告、创建合同文档、批量生成通知/证书、填充Word模板、制作商业计划书时触发。
✅ 推荐 HTML 结构（语义化 + 无内联样式）
<div id="wrapper">
<div id="left-side">
<div id="text">
这是一段需要转录的文字内容。它可能较长，但不应超过 750px 宽度；在宽屏下靠右对齐，在窄屏下居中显示。
</div>
</div>
<div id="right-side">
<img src="letter.jpg" alt="手写信件扫描图" />
</div>
</div>✅ 对应 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: 100%;
min-width: 250px;
background-color: #ffcc80; /* 橙色背景便于识别 */
padding: 1rem;
word-break: break-word;
text-align: right; /* 宽屏下生效，窄屏由父级 text-align:center 覆盖 */
}
#right-side img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* 宽屏响应式：≥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; /* 图片容器左对齐，避免 img 受父级 center 影响 */
}
#text {
text-align: right;
}
}⚠️ 注意事项与最佳实践
- 不要混用 float 和 inline-block：原问题中使用 float:right 会导致文档流异常，尤其在响应式切换时难以控制；改用 text-align + inline-block 更稳定。
- min-width=50% 是错误写法：CSS 中应为 min-width: 50%，且此处更适合用 width 配合 max-width 控制弹性。
-
推荐升级为 Flexbox（更简洁）：若兼容性允许（IE10+），可用以下替代方案：
#wrapper { display: flex; flex-wrap: wrap; justify-content: center; } @media (min-width: 1500px) { #wrapper { flex-direction: row; } #left-side, #right-side { flex: 1 1 49%; } } - 图片务必设置 max-width: 100% 和 height: auto，防止溢出或失真。
- 断点值（1500px）应根据实际设计稿调整，常见断点有 768px（平板）、1024px（桌面）、1440px（大屏）等，建议结合用户设备数据设定。
该方案兼顾可读性、可维护性与跨设备兼容性，无需 JavaScript 即可实现优雅的响应式文本-图像对照布局。
