如何让ABOUT ME标题显示在图片和简介上方？

你的问题核心是**#pic容器的flex布局逻辑错误**——当前h1、img、#intro都在同一个flex容器内，默认横向排列导致标题跑到图片左侧；缩小图片后，flex元素的空间分配规则引发布局混乱。以下是直接可行的修复方案：

步骤1：调整HTML结构 #

将ABOUT ME标题从#pic容器中移出，作为#about的直接子元素，还原标题的层级逻辑，让它单独占据一行：

<section id="about">
  <h1 class="headings">ABOUT ME</h1>
  <div id="pic">
    <img src="images/planner.jpg" alt="">
    <div id="intro">
      <h2>Michelle Lyn</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi id, vel nihil aperiam exercitationem cum accusamus assumenda doloribus perferendis, eligendi dolorem iure! Nemo culpa, provident quis aliquam impedit sed maiores eaque! Sapiente officiis sit repudiandae sed! Quo voluptates quas animi! </p>
    </div>
  </div>
</section>

步骤2：修改CSS适配布局 #

调整#pic的flex属性，确保图片和介绍横向排列，同时优化图片缩放后的布局稳定性：

/* About Section */
#about {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 50px;
}

#pic {
  display: flex;
  align-items: center; /* 垂直方向居中对齐元素 */
  gap: 20px; /* 图片与介绍之间留固定间距 */
  flex-wrap: wrap; /* 空间不足时自动换行，避免挤压错乱 */
}

#pic img {
  width: 575px;
  height: auto; /* 保持图片原始比例，防止拉伸变形 */
  max-width: 100%; /* 确保图片不会超出容器宽度 */
}

#intro {
  display: flex;
  flex-direction: column;
  text-align: justify;
  padding: 10px;
  flex: 1; /* 让介绍区域自动填充图片以外的剩余空间 */
}

#intro h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

关键改动说明 #

• 标题移出#pic容器，解决了标题与图片横向排列的问题，回归正常页面结构
• flex-wrap: wrap保证缩小图片或窗口时，元素自动换行，避免布局崩溃
• height: auto和max-width: 100%让图片缩放时保持比例，适配不同屏幕
• flex:1让介绍区域自动占满剩余空间，布局更均衡

内容的提问来源于stack exchange，提问作者WebDevDiva