Html 如何使用引导在一行图像上生成文本？

现在它没有响应，两个图像应该在一行中。我想在这些图像上制作像绘画和摄影这样的文字。怎么可能呢

。标题{
位置：绝对位置；
最高：9%；
左：11px；
宽度：100%；
颜色：#fff；
字体系列：Myriad Pro regular；
字体大小：15.31px；
}
.标题1{
位置：绝对位置；
顶部：-51px；
左：11px；
宽度：100%；
颜色：#fff；
字体系列：Myriad Pro regular；
字体大小：15.31px；
}
.图像和文本{
位置：相对位置；
}

绘画

摄影

您需要在相对元素中覆盖图像和标题文本

figure{
    position: relative;
}

检查下面的代码片段-

图{
位置：相对位置；
}
.标题{
位置：绝对位置；
顶部：10px；
左：11px；
宽度：100%；
颜色：#fff；
字体系列：Myriad Pro regular；
字体大小：15.31px；
}
.标题1{
位置：绝对位置；
顶部：10px；
左：11px；
宽度：100%；
颜色：#fff；
字体系列：Myriad Pro regular；
字体大小：15.31px；
}
.图像和文本{
位置：相对位置；
}

绘画

摄影

稍微修改了HTML和CSS

。图像和文本{
位置：相对位置；
}
.image\u和\u text.caption{
位置：绝对位置；
顶部：自动；
底部：0px；
左：30px；
颜色：白色；
文本阴影：2px0px6pxrgba（0,0,0,0.5）；
}

绘画

摄影

更新css部分

    figure {
      display: flex; /*For image lineup */
    }
   .imageandtext, .image_grid {
      position: relative;
    }

   .imageandtext, .image_grid {
       position: relative;
       margin:5px;
    }

图{
显示器：flex；
}
.标题{
位置：绝对位置；
顶部：9%；/*根据需要进行更改*/
左：52px；/*根据需要更改*/
宽度：100%；
颜色：#fff；
字体系列：Myriad Pro regular；
字体大小：15.31px；
}
.标题1{
位置：绝对位置；
顶部：51px；/*根据需要进行更改*/
左：11px；/*根据需要更改*/
宽度：100%；
颜色：#fff；
字体系列：Myriad Pro regular；
字体大小：15.31px；
}
.imageandtext，
.图像网格{
位置：相对位置；
保证金：5px；
}

绘画

摄影