本文介绍一种基于 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 显示器的各类设备。
