Flexbox实现三张图片并排及section-text布局问题求助

问题核心是**#team容器的Flex方向错误**，导致文字区块和图片区块横向排列，而非垂直堆叠。同时图片容器未启用Flex，无法让图片横向并排。以下是修正后的代码：

修正后的CSS #

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto:100,300,700');

html, body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-size: 10px;
  line-height: 3.5em;
  font-weight: 300;
}

h1, h2, h3, h4, h5 {
  font-family: Roboto Condensed;
}

h1 {
  font-size: 9em;
  text-align: center;
  text-transform: uppercase;
}

h2 {
  font-size: 5em;
  text-align: center;
  text-transform: uppercase;
  line-height: 3em;
  color: white;
  text-shadow: #020819 8px -20px 9px
}

h3 {
  font-size: 4.2em;
  text-align: center;
  line-height: 1em;
  margin-top: 0;
}

h4 {
  font-size: 1.5em;
  letter-spacing: 0.4;
  line-height: 1em;
  margin-bottom: 15px;
}

h5 {
  font-size: 1.2em;
  line-height: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.dark-background {
  background-color: rgb(25, 33, 41);
  color: white;
}

.service-box img {
  width: 125px;
}

#team .section-text {
  font-size: 1.9em;
  text-align: center;
  margin-bottom: 15px;
}

#team .member-name {
  font-size: 1.5em;
  font-weight: 700;
}

/* 关键修改1：将#team的Flex方向改为column，让文字和图片区块垂直堆叠 */
#team {
  padding: 75px 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* 新增：垂直排列子元素 */
  align-items: center; /* 新增：让子元素水平居中 */
}

/* 关键修改2：给图片容器添加Flex布局，让三个article横向并排 */
#team .team-members {
  display: flex;
  gap: 40px; /* 新增：控制成员卡片之间的间距 */
  justify-content: center;
  margin-top: 30px;
}

#team .team-members article {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#team p {
  width: 60%;
  margin: 10px auto;
}

#team hr {
  margin: 20px auto 30px auto;
  width: 40%;
}

.section-team img {
  width: 250px;
  height: 180px;
}

修正后的HTML #

<section id="team" class="dark-background section-team">
  <div class="section-intro">
    <h4 class="section-text">Team</h4>
    <p class="section-text">Our team collectively has 75 years of experience. Odds are, when you jump out of the plane with these professionals, you wont go splat.</p>
    <hr>
  </div>
  <!-- 新增class：team-members，方便CSS定位图片容器 -->
  <div class="team-members">
    <article>
      <p class="member-name"><strong>Harold Rothsten,</strong></p>
      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_c18b1c463b80090894237a262dfdfbad.jpg" alt=" diving in cloudy day">
    </article>

    <article>
      <p class="member-name"><strong>Susan Phillips,</strong></p>
      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_a18d6123a7c8e75f7e70a4e59b941093.jpg" alt=" skydiving blue sky">
    </article>

    <article>
      <p class="member-name"><strong>Tyalor Roberts,</strong></p>
      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/upload_7104a331530d1b0611da55093b7dc421.jpg" alt=" diving in a sunn day">
    </article>
  </div>
</section>

修改说明 #

1. #team容器：设置flex-direction: column，让文字介绍区和成员图片区垂直排列，确保section-text在图片上方；同时添加align-items: center让子区块水平居中。
2. 图片容器（.team-members）：添加display: flex，让内部三个article横向并排；用gap控制卡片间距，避免挤在一起。
3. 细节优化：给文字区和图片区添加语义化class，便于维护；移除img标签内的冗余width属性，统一由CSS控制尺寸。

这样调整后，既能实现section-text在图片上方，又能让三张图片横向并排，同时保持hr为水平状态。

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