CSS图片与Work标题并排及多图布局问题求助

一、实现主图片与“Work”标题并排并自适应 #

核心问题是Work标题和图片不在同一布局容器内，且原代码用了float、负margin这类易引发布局错乱的属性。我们复用About Me的flex布局逻辑，将标题与图片区域整合到同一容器即可解决：

关键调整方向 #

1. 重构HTML结构，把Work标题和主图片放入同一个flex容器
2. 移除破坏flex布局的浮动、负margin属性
3. 给图片添加自适应规则，确保随窗口尺寸自动缩放

二、添加主图片下方的两张并排图片 #

用flex布局实现图片组等分并排，搭配自适应规则保证缩放兼容性。

修改后的完整CSS代码 #

.AboutMeContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.mainheaders {
  color: rgb(101, 118, 143);
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-weight: lighter;
  font-size: 40px;
  padding-left: 95px;
}

.mainheaderscontainer {
  display: flex;
  padding-inline: 6px 20px;
  border-right: 3px solid rgb(101, 118, 143);
  align-items: flex-start; /* 标题顶部对齐图片容器 */
}

.aboutMeParagraphContainer {
  padding-inline: 20px;
  padding-right: 80px;
}

.Workcontainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-left: 16px;
}

#mainworkcontainer {
  padding-bottom: 0; /* 移除多余内边距避免布局错位 */
}

/* 主图片区域容器 */
.work-main-image {
  flex: 1; /* 占据容器剩余空间 */
  padding-inline: 20px;
}

/* 图片自适应核心规则 */
.work-main-image img,
.image-group img {
  width: 100%;
  height: auto;
  display: block;
  border: solid rgb(101, 118, 143);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.work-main-image img:hover,
.image-group img:hover {
  opacity: 1.0;
}

/* 下方并排图片组容器 */
.work-image-group-container {
  display: flex;
  gap: 20px; /* 图片间间距 */
  padding: 20px 16px 80px; /* 上下左右内边距 */
}

.image-group {
  flex: 1; /* 两张图片等分容器空间 */
}

/* 图片标题样式（可选优化） */
.image-title {
  position: relative;
  bottom: 40px;
  background: rgba(255,255,255,0.8);
  padding: 8px 16px;
  display: inline-block;
}

修改后的完整HTML代码 #

<header>
  <h1>Lerantino</h1>
  <nav class="topnav">
    <ul>
      <li><a class="AboutMe" href="">About Me</a></li>
      <li><a class="Work" href=""> Work</a></li>
      <li><a class="Contact Me" href="">Contact Me</a></li>
      <li><a class="Resume" href="">Resume</a></li>
    </ul>
  </nav>
</header>
<div class="headerImage">
  <img src="/Images/greenvalley-pictures-IPbClYwlSEA-unsplash.jpg" alt="Header image">
  <h2>Cool Subtitle Here!</h2>
</div>
<section>
  <div class="AboutMeContainer">
    <div class="mainheaderscontainer">
      <h3 class="mainheaders">About<br>Me</h3>
    </div>
    <div class="aboutMeParagraphContainer">
      <p class="aboutMeParagraph">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint, quia? nipsum dolor sit amet consectetur, adipisicing elit. Ratione ut veritatis assumenda, harum magnam illum sit earum quia nemo consectetur repudiandae, perspiciatis libero optio
        quidem quos porro nostrum enim sapiente molestias? Quo aut autem impedit expedita blanditiis aspernatur voluptatum nam. ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</section>

<section>
  <!-- Work标题和主图片放入同一flex容器 -->
  <div class="Workcontainer">
    <div class="mainheaderscontainer" id="mainworkcontainer">
      <h4 class="mainheaders">Work</h4>
    </div>
    <div class="work-main-image">
      <img src="Images/B1B53B46-28D4-4E02-ADA5-018744EF7222_1_201_a.jpeg" alt="Main work project">
      <div class="image-title">Project</div>
    </div>
  </div>
</section>

<!-- 下方并排图片组 -->
<section class="work-image-group-container">
  <div class="image-group">
    <img src="Images/your-second-image.jpg" alt="Second project">
    <div class="image-title">Project 2</div>
  </div>
  <div class="image-group">
    <img src="Images/your-third-image.jpg" alt="Third project">
    <div class="image-title">Project 3</div>
  </div>
</section>

核心修改说明 #

1. 并排布局实现：

   • 将Work标题和主图片容器整合进同一个.Workcontainer flex容器，利用flex自动分配空间实现并排
   • 移除原代码中float: right、margin-top: -240px这类易导致布局错乱的属性

2. 自适应缩放实现：

   • 给所有图片设置width: 100%; height: auto;，确保图片随父容器宽度自动缩放并保持比例
   • 用flex: 1让图片容器自动填充剩余空间，适配不同窗口宽度

3. 下方并排图片实现：

   • 创建.work-image-group-container作为flex容器，内部两个.image-group都设置flex: 1，实现等分空间并排
   • 用gap属性设置图片间间距，比margin更简洁可靠

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