本文介绍如何使用 css 媒体查询和现代显示模式（如 inline-block）构建响应式双栏布局，使文本与图片在宽屏下左右并排（各占约 50%），在窄屏下自动转为上下堆叠且居中显示，并确保文本最大宽度为 750px、右对齐，同时保持语义清晰与样式可维护。
要实现「文本左、图片右」的自适应布局（宽屏并排，窄屏堆叠），关键在于脱离内联样式、采用语义化结构 + CSS 控制流 + 媒体查询断点。以下是一个专业、可复用的解决方案：
✅ 推荐 HTML 结构（语义清晰，无冗余嵌套）
<div id="wrapper">
<div id="left-side">
<p id="text">This text should not be longer than 750px. It wraps gracefully and aligns right within its container.</p>
</div>
<div id="right-side">
<img src="letter.jpg" alt="Scanned letter image" style="max-width:90%">
</div>
</div>✅ 核心 CSS（含响应式逻辑）
/* 基础重置与容器 */
#wrapper {
background-color: #ffdddd; /* 浅红，便于调试 */
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
/* 默认状态：窄屏 → 垂直堆叠、居中 */
#left-side,
#right-side {
width: 100%;
margin: 0 auto;
text-align: center;
}
#text {
max-width: 750px;
min-width: 250px;
margin: 0 auto;
background-color: #ffe0b2; /* 橙色背景便于识别 */
padding: 0.75rem;
text-align: right; /* 文本内容右对齐 */
line-height: 1.6;
}
#right-side img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* 宽屏断点：≥1500px 时切换为并排布局 */
@media (min-width: 1500px) {
#wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
#left-side,
#right-side {
flex: 1 1 49%; /* 弹性分配，留出间隙空间 */
margin: 0;
text-align: left;
}
#text {
text-align: right; /* 保持右对齐，但容器变宽 */
margin: 0;
}
/* 可选：强制图片等高或约束高度 */
#right-side {
display: flex;
align-items: center;
}
}⚠️ 注意事项与最佳实践
- 避免 float 和 inline-block 的兼容性陷阱：原方案中 float:right 易导致父容器塌陷；现代推荐用 flexbox 或 grid，此处 flex 更简洁可控。
- min-width=50% 是无效写法：CSS 中应为 min-width: 50%，且该属性不适用于流式响应场景；改用 flex-basis 或媒体查询更可靠。
- 图片响应式必须加 max-width: 100%; height: auto;，否则在窄屏下会溢出。
- 断点选择建议：1500px 适合大屏桌面，实际项目中可根据设计稿调整（如 1200px 或 1024px），并配合 @media (max-width: ...) 实现移动优先。
-
无障碍增强：为
添加语义化 alt 属性；长文本建议包裹在
或
中，而非裸 div。
✅ 总结
该方案以移动优先为原则，通过 flexbox 实现默认垂直堆叠，再利用媒体查询在大屏下无缝切换为并排双栏。它兼顾了可读性、可维护性与响应能力，同时严格满足：文本最大宽 750px、右对齐、居中适配，图片自适应缩放且不溢出——是现代 Web 布局的标准实践。
