Html 如何将图片水平排列而不是垂直排列？

我正在关注Youtube教程，但与视频中不同的是，这些图片为我排列在彼此下方，而不是旁边……是否有这些代码是原因？我（几乎）肯定我一直在跟踪视频，没有任何改变

HTML

。功能{
填充：20px；
背景：白色；
颜色：灰色；
显示器：flex；
弯曲方向：行；
}
.特征图{
保证金：自动；
宽度：300px；
边界半径：10px；
文本对齐：居中；
文本转换：大写；
}
.特征图img{
边框：1px纯白；
宽度：200px；
盒影：黑色0 10px；
边界半径：50%；
保证金：自动；
显示：内联flex；
}

nr1
nr2
nr3

您需要将

图像

和

figcaption

包装在单独的

图

标签中

。功能{
填充：20px；
背景：白色；
颜色：灰色；
显示器：flex；
弯曲方向：行；
}
.特征图{
保证金：自动；
宽度：300px；
边界半径：10px；
文本对齐：居中；
文本转换：大写；
}
.特征图img{
边框：1px纯白；
宽度：200px；
盒影：黑色0 10px；
边界半径：50%；
保证金：自动；
显示：内联flex；
}

nr1
nr2
nr3

每个图像和相关标题都需要一个独立的图形

。功能{
填充：20px；
背景：白色；
颜色：灰色；
显示器：flex；
弯曲方向：行；
}
.特征图{
保证金：自动；
宽度：300px；
边界半径：10px；
文本对齐：居中；
文本转换：大写；
}
.特征图img{
边框：1px纯白；
宽度：200px；
盒影：黑色0 10px；
边界半径：50%；
保证金：自动；
显示：内联flex；
}

nr1
nr2
nr3