Javascript 图像旁的文本

我有不同宽度但高度相同的不同图像，我想在每个图像旁边用文本内联显示它们，我这样做了，但在响应屏幕上看起来不太好，我如何解决这个问题？如果有其他方法来编写此代码，而不是我的，请帮助，以下是我的代码：

.img{
最小宽度：30%；
浮动：左；
}
.文本{
字体大小：20px；
宽度：70%；
}

试验

试验

试验

最好使用

图

和

图

你的问题不是很精确，但这对我来说很有效：

正文
正文
正文

使用下面的代码片段。它在反应灵敏的屏幕上也很好看

使用Css： div{溢出：隐藏}

<div class="row text-center">
   <div class="col-lg-4  col-md-4 col-sm-4 col-xs-12">
     <figure>
        <img src="https://placehold.it/350x150">
        <figcaption>Text</figcaption>
     </figure>
   </div>
   <div class="col-lg-4 col-md-4 col-sm-4  col-xs-12">
     <figure>
       <img src="https://placehold.it/250x150">
       <figcaption>Text</figcaption>
    </figure>
   </div>
   <div class="col-lg-4 col-md-4  col-sm-4  col-xs-12">
      <figure>
        <img src="https://placehold.it/300x150">
        <figcaption>Text</figcaption>
     </figure>
   </div>
</div> 

正文
正文
正文

“不好看”您希望它看起来像什么？你的问题太模糊了。此外，您的HTML是无效的。你所有的

标记都没有关闭。我想要图像下面的文本，它们已经关闭了。你为什么不为每个图像创建一个容器？嗯，你不能只使用

：after

或

：before

伪元素，并按照你的意愿定位每个元素吗？