本文详解如何使用 css flexbox 将图片精准布局在文本右侧，适配响应式设计，并修正常见对齐失效问题。
本文详解如何使用 css flexbox 将图片精准布局在文本右侧，适配响应式设计，并修正常见对齐失效问题。
在现代网页布局中，将图片与文字并排显示（尤其是图片居右、文字居左）是常见需求，而 Flexbox 是最简洁、可控性最强的解决方案。从你提供的代码可见，问题核心在于：.main__section 虽已设为 display: flex，但其子元素（.container）内部结构未正确应用弹性布局，导致图片与文本仍垂直堆叠。
✅ 正确做法是在包含图文的直接父容器上启用 Flex，并合理分配空间。根据你的 HTML 结构，.container 是 .main__section-content（文本）和 .home-section-img（图片容器）的共同父级——因此应将 display: flex 应用于 .container，而非仅 .main__section。
以下是推荐的完整 CSS 方案：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
.main__section {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh; /* 替代 height: 100vh，避免内容截断 */
}
.container {
display: flex;
align-items: center;
gap: 2rem; /* 推荐替代 padding-right，更语义化且响应友好 */
width: 100%;
max-width: 1200px; /* 可选：约束总宽度 */
margin: 0 auto;
padding: 0 1.5rem;
}
.main__section-content {
flex: 1; /* 占据剩余可用空间 */
/* 移除固定 padding-right，改用 gap 控制间距 */
}
.home-section-img {
flex: 0 0 45%; /* 不伸缩、不收缩，基础宽度 45%，留白适配图片比例 */
max-width: 100%;
}
.home__section-image {
display: block;
max-width: 100%;
height: auto;
border-radius: 8px; /* 可选：提升视觉质感 */
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 可选：轻微阴影 */
}
? 关键要点说明：
- ✅ 层级要准：Flex 必须作用于
.container（图文同级父容器），而非外层.main__section（它仅用于整体居中）。 - ✅
gap优于padding-right：gap是 Flex/Grid 原生间距属性，不会影响子项盒模型，且自动适配 RTL（从右向左）语言。 - ✅ 图片容器设
flex: 0 0 [width]：防止图片拉伸变形，同时保留响应能力；若需等宽图文，可统一设flex: 1。 - ⚠️ 避免
height: 100vh在.main__section：可能因滚动条或头部占用导致高度计算偏差，改用min-height: 100vh更稳健。
? 进阶提示（响应式增强）：
在移动设备上，建议使用媒体查询切换为垂直布局：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.home-section-img {
flex: none;
width: 100%;
}
}
这样，小屏下图文自动堆叠，大屏下左右并列，真正实现「一处编码、多端适配」。无需 JavaScript，纯 CSS 即可完成专业级图文混排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
