通过 CSS 按特定顺序对齐图像答案

【问题标题】：Align images in specific order through CSS通过 CSS 按特定顺序对齐图像
【发布时间】：2022-11-16 02:58:51
【问题描述】：

我试图按以下顺序对齐图像

我已经正确完成了左侧。我遇到的问题是调整图片 4（上面链接中的图片）。图片 1,2 和 3 正确对齐

 <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;
   }

【问题讨论】：

标签： html css reactjs flexbox

【解决方案1】：

我强烈建议你为此使用 css 网格布局

https://css-tricks.com/snippets/css/complete-guide-grid/

在那里，您可以为父容器定义行数和列数，然后将子容器分配给特定的行高和列高

【讨论】：