本文详解如何通过 css flexbox 将图片精准放置在文本内容右侧，适配响应式布局，并修正常见结构与样式误区。

本文详解如何通过 css flexbox 将图片精准放置在文本内容右侧，适配响应式布局，并修正常见结构与样式误区。

要实现“图片位于文本右侧”的经典图文并排布局，核心在于合理嵌套 Flex 容器并控制子元素的伸缩与对齐行为，而非仅对最外层元素设置 display: flex。原代码中 .main__section 虽已设为 flex，但其内部直接包裹了 .container（一个块级容器），而真正的图文内容（.main__section-content 和 .home-section-img）却深藏于 .container 内部——这导致 Flex 布局未作用于图文两个兄弟元素，自然无法实现并排。

✅ 正确做法是：让图文两个直接兄弟容器（即 .main__section-content 和 .home-section-img）成为同一级 Flex 容器的子项。因此需调整 HTML 结构，将这两个 div 并列置于 .main__section 下（移除冗余的 .container 包裹层），再配合语义化、可控的 Flex 样式：

<div class="main__section">
  <div class="main__section-content">
    <h4 class="home__section-title">Best Destinations around the world</h4>
    <h1 class="home__section-desc">Travel, enjoy<br>and live a new<br>and full life</h1>
    <p class="home__section-specific">
      Built Wicket longer admire do barton vanity itself do in it. <br>
      Preferred to sportsmen it engrossed listening. Park gate<br>
      sell they west hard for the.
    </p>
  </div>
  <div class="home-section-img">
    @@##@@
  </div>
</div>

对应的关键 CSS 如下：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

.main__section {
  display: flex;
  align-items: center;        /* 垂直居中对齐 */
  gap: 40px;                 /* 图文间留白（推荐替代 padding-right） */
  min-height: 100vh;         /* 确保视口高度填充，避免内容塌陷 */
  padding: 0 2rem;           /* 水平内边距，提升移动端可读性 */
}

.main__section-content {
  flex: 1;                   /* 占据剩余可用空间，自适应宽度 */
  max-width: 600px;          /* 防止过长段落影响可读性 */
}

.home-section-img {
  flex: 0 0 auto;            /* 不伸缩，按图片固有尺寸渲染 */
  width: 320px;              /* 可选：设定理想图片宽度 */
}

.home__section-image {
  max-width: 100%;
  height: auto;
  display: block;            /* 消除图片底部默认空白 */
}

? 注意事项与最佳实践：

• ✅ 避免过度嵌套：.container 在此场景中非必需，反而阻断 Flex 流；若需全局居中，可对 .main__section 设置 margin: 0 auto 或结合 max-width 控制整体宽度。
• ✅ 慎用 height: 100vh：原答案中 height: 100vh 可能导致内容被截断（尤其小屏幕），推荐改用 min-height: 100vh 更安全。
• ✅ 响应式兜底：在移动设备上，建议添加媒体查询使布局转为垂直堆叠：

  @media (max-width: 768px) {
    .main__section {
      flex-direction: column;
      text-align: center;
    }
    .home-section-img {
      width: 100%;
      margin-top: 2rem;
    }
  }

• ✅ 语义与可访问性：为 补充有意义的 alt 属性（如示例中的 "Scenic travel destination"），不可仅用 "Img"。

综上，Flexbox 是实现图文左右布局最简洁、可靠的方式——关键在于确保图文是同一 Flex 容器的直系子元素，并通过 flex、gap、align-items 等属性精细调控。无需浮动（float）、绝对定位（position）或复杂 Grid，即可达成专业、响应、可维护的视觉效果。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！