我需要帮助排序我的图像正确的CSS，HTML

我是网络开发新手，我正在尝试制作一个网站，用CSS、HTML5对我的图片进行排序。我希望排序看起来像文本一样，将图像像新段落一样分开。我试图补充

<br />

一些文本
一些文本

-您需要将所有项目放在一个div中，并使容器div具有列方向。 -id必须是unic，因此不允许对HTML代码中的多个元素使用一个id

正文{
背景色：红色；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
#第一，第二{
边缘顶部：10px；
最大宽度：1500px；
左边距：自动；
右边距：自动；
}
.pics文本{
字体系列：“Roboto”，无衬线；
显示器：flex；
字体大小：36px；
颜色：#ffffff；
不透明度：87%；
}
.pic项目{
浮动：左；
位置：相对位置；
宽度：20%；
垫面：5px；
右侧填充：7px；
}
.pic项目a img{
宽度：100%；
边界半径：5px；
}

一些文本
一些文本

那么你想要一张图片和一个文本在下面，还是图片和文本在旁边？ 如果您想先创建一些图像，然后创建一些文本，那么请将所有项目放在一个div中，并使用direction:column调整容器div

.first{
  display: flex;
  flex-direction:row;
}
img{
  width: 50%
}

HTML将是

<h1>Some Text</h1>
<div class="first">
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
</div>
<h1>Some Text</h1>
<div class="first">
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
  <img src="https://img.favpng.com/20/20/8/football-sport-ball-game-png-favpng-8PPaPFsNEixHevLDVTnWJTegN.jpg" alt="football"/>
</div>

一些文本
一些文本

有一种非常简单的方法可以解决这个问题，添加20多行，上面写着

，但我正在寻找一种更有效的方法。欢迎，如果需要，请询问我，我很乐意帮助。：）