本文详解通过 Flexbox 布局控制图片位置与尺寸，解决文字与图片错位、图片横向/纵向溢出、媒体查询失效等问题，核心是修正 .row 的 flex-direction 并配合合理间距与约束策略。
本文详解通过 flexbox 布局控制图片位置与尺寸，解决文字与图片错位、图片横向/纵向溢出、媒体查询失效等问题，核心是修正 `.row` 的 `flex-direction` 并配合合理间距与约束策略。
在您提供的代码中，.row 使用了 display: flex 但默认为 flex-direction: row（水平排列），导致 .col 元素（含标题、段落、按钮和图片）被强制并排显示——而 HTML 中图片位于文本之后（即同级元素），却未被包裹在独立列中，因此实际渲染时图片可能突破容器边界，尤其在小屏下因宽度计算异常或未设约束而发生横向溢出（horizontal overflow）或底部塌陷。
✅ 根本解决方案：将 .row 改为垂直流式布局
只需添加 flex-direction: column，使子元素（包括文字内容和 ）自上而下堆叠，并配合 align-items: center 居中对齐：
.row {
height: 100%;
display: flex;
flex-direction: column; /* ← 关键修改：启用垂直排列 */
align-items: center;
justify-content: center; /* 可选：垂直居中整体内容 */
gap: 2rem; /* 推荐：统一控制元素间距，替代手动 margin */
}? 同时需确保图片自身不溢出：
在 CSS 中为图片添加响应式约束，避免其固有尺寸破坏布局：
.row img {
max-width: 100%; /* 确保不超出父容器宽度 */
height: auto; /* 保持宽高比 */
display: block; /* 消除行内元素默认基线间隙 */
margin-top: 1.5rem; /* 可选：与上方文字保持视觉呼吸感 */
}⚠️ 注意事项与增强建议：
【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下： 01、支持多语言扩展（独立内容表，可一键复制中文版数据） 02、支持一键修改后台路径； 03、杜绝常见弱口令，内置多种参数过滤、有效防范常见XSS； 04、支持文件分片上传功能，实现大文件轻松上传； 05、支持一键获取微信公众号文章（保存文章的图片到本地服务器）； 06、支持一键
- 移除冗余的媒体查询陷阱：原 @media (max-width: 650px) 中仅调整了 h1 字体大小，但未处理图片或 .row 布局逻辑，导致“写了媒体查询却无效果”。建议在断点内统一重置 .row 行为（其实 flex-direction: column 在所有屏幕下均适用，无需重复声明）。
-
语义化 HTML 更可靠：若图片属于内容主体，建议将其包裹在语义化标签中（如
），而非直接平铺在 .col 内；当前结构中 .col 被设计为 50% 宽度，但图片未归属任何列，易引发布局歧义。 - 容器安全区兜底：为 .container 添加 overflow: hidden 可防止极端情况下的溢出（仅作防御性补充，非根本解）。
✅ 最终效果验证要点：
- 图片始终位于文字下方，且随视口缩放等比缩小；
- 小屏下无横向滚动条，无元素裁切；
- 按钮、标题、段落、图片形成清晰的垂直阅读流。
通过这一组合策略（flex-direction: column + gap + max-width: 100%），您无需复杂 JS 或额外 wrapper 即可实现稳健、可维护的响应式图文布局。
