本文介绍如何使用 css 媒体查询与现代显示模式（inline-block）构建一个响应式双栏布局：大屏幕下文本与图片左右并列（各占约49%宽度），小屏幕下自动堆叠为上下结构，且文本居中、最大宽750px、右对齐；图片自适应宽度并保持居中。
要实现“大屏并排、小屏堆叠”的响应式双栏布局（左侧为带约束的文本块，右侧为图像容器），关键在于脱离内联样式、合理运用 CSS 显示模型与媒体查询。以下是一个结构清晰、语义明确、可维护性强的完整方案。
✅ 推荐 HTML 结构（语义化 + 无内联样式）
这是一段转录文字。它不应超过 750px 宽度，在大屏时靠右对齐；在小屏堆叠时则水平居中显示。@@##@@
✅ 对应 CSS 样式（含响应式断点）
/* 全局重置与基础样式 */
#wrapper {
background-color: #ffdddd; /* 浅红，便于调试 */
padding: 1rem;
margin: 0 auto;
}
#left-side,
#right-side {
background-color: #e0f7fa; /* 浅青，区分区域 */
padding: 1rem;
box-sizing: border-box;
}
/* 小屏默认：堆叠布局（block） */
#left-side,
#right-side {
display: block;
width: 100%;
text-align: center;
}
#text {
display: inline-block;
max-width: 750px;
min-width: 250px;
background-color: #ffcc80; /* 橙色背景，突出文本区 */
padding: 0.75rem 1rem;
text-align: right; /* 文本内容右对齐 */
margin: 0 auto; /* 居中 inline-block 容器 */
}
/* 大屏响应式：并排布局（≥1500px） */
@media (min-width: 1500px) {
#left-side,
#right-side {
display: inline-block;
vertical-align: top;
width: 49%; /* 留 2% 间隙防换行，也可用 flex 替代 */
}
#left-side {
text-align: right; /* 保证内部 #text 靠右 */
}
#right-side {
text-align: center; /* 图片居中对齐 */
}
/* 可选：为图像添加响应式约束 */
#right-side img {
max-width: 100%;
height: auto;
}
}⚠️ 注意事项与优化建议
- 避免 float：原方案中 float: right 易引发清除浮动问题，且不利于响应式切换；改用 display: inline-block 或更推荐的 display: flex（见下方进阶提示）更为稳健。
- min-width=50% 是错误语法：CSS 中应为 min-width: 50%，且此处逻辑更适合用 width + @media 控制。
- 图片容器无需 overflow: auto：除非有溢出内容，否则可省略；若需防止图片撑破容器，请确保 img { max-width: 100%; height: auto; }。
- 字体/行高适配：可在 #text 中添加 line-height: 1.6; font-size: 1rem; 提升可读性。
- 进阶替代方案（推荐）：如项目支持现代浏览器，可用 Flexbox 实现更简洁的响应式：
#wrapper {
display: flex;
flex-wrap: wrap;
gap: 2%;
}
#left-side, #right-side { flex: 1 1 49%; }
@media (max-width: 1499px) {
#left-side, #right-side { flex: 1 1 100%; }
}✅ 总结
该方案通过标准 CSS 媒体查询精准控制布局断点（如 min-width: 1500px），结合 inline-block 或 flex 实现语义清晰、易于维护的响应式双栏。文本严格限制在 max-width: 750px 内并智能对齐（大屏右对齐、小屏居中），图像自适应缩放且不破坏流式布局——兼顾可访问性、性能与设计一致性。
