如何通过CSS按指定顺序对齐图片？图片4排版异常求助

问题描述 #

需要实现指定的图片对齐布局（参考布局：左侧为文本区域，右侧分为两列，左列放置图片1，右列垂直依次排列图片2、图片3、图片4），目前左侧文本及图片1、2、3排版正确，但图片4的位置无法调整。当前代码如下：

现有HTML代码 #

<div id='section_1'>
  <div className='typoSection'>
    <h3>Main Heading</h3>
    <h5>Sub-Heading</h5>
    <p>Paragraph</p>
  </div>

  <div>
    <span><img className='imgMargin' src={require('./assets/img/training_img1.png')} /></span>
    <span>
      <img className='imgMargin' src={require('./assets/img/training_img2.png')} />
      <img className='imgMargin' src={require('./assets/img/training_img3.png')} />
      {/* <img src={require('./assets/img/training_img4.png')} /> */}
    </span>
  </div>
</div>

现有CSS代码 #

.trainingContent #section_1,{
display: flex;
 }

 #section_1 p {
  line-height: 3.25vw;
  font-size: 21px;
  }

.typoSection {
  margin-right: 1.4vw;
   }

解决方案 #

1. 修复CSS语法错误 #

现有CSS里的.trainingContent #section_1,{多了一个冗余逗号，会导致CSS解析异常，修正为：

.trainingContent #section_1 {
  display: flex;
}

2. 调整布局结构实现图片4的正确位置 #

通过Flexbox重新组织右侧图片容器的结构，精准控制图片排列：

修改后的HTML代码

<div id='section_1'>
  <div className='typoSection'>
    <h3>Main Heading</h3>
    <h5>Sub-Heading</h5>
    <p>Paragraph</p>
  </div>

  <!-- 右侧图片容器，拆分左右列 -->
  <div className='imageContainer'>
    <div className='imageLeftCol'>
      <img className='imgMargin' src={require('./assets/img/training_img1.png')} />
    </div>
    <div className='imageRightCol'>
      <img className='imgMargin' src={require('./assets/img/training_img2.png')} />
      <img className='imgMargin' src={require('./assets/img/training_img3.png')} />
      <img className='imgMargin' src={require('./assets/img/training_img4.png')} />
    </div>
  </div>
</div>

修改后的CSS代码

.trainingContent #section_1 {
  display: flex;
  align-items: flex-start; /* 让文本区和图片容器顶部对齐 */
}

#section_1 p {
  line-height: 3.25vw;
  font-size: 21px;
}

.typoSection {
  margin-right: 1.4vw;
}

/* 右侧图片容器设为flex，拆分左右列 */
.imageContainer {
  display: flex;
  gap: 1vw; /* 左右列之间的间距 */
}

/* 右侧列设为垂直flex布局，排列图片2、3、4 */
.imageRightCol {
  display: flex;
  flex-direction: column;
  gap: 1vw; /* 图片上下间距 */
}

/* 保留原有边距，可根据需求调整 */
.imgMargin {
  margin: 0;
}

说明 #

• 把右侧图片容器拆分为左右两列，左列单独放置图片1，右列用垂直Flex布局依次排列图片2、3、4，完美匹配目标布局。
• 使用gap属性控制元素间距，比传统margin更简洁易维护，也可根据需求替换为margin设置。
• 添加align-items: flex-start确保左侧文本区和图片容器顶部对齐，避免布局错位。

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