今天我们来学习一下如何使用 CSS 把图片和文字排列在同一行。 首先，你需要在 HTML 文件中添加一个包含图片和文字的 div 或其他元素。在这个例子中，我们使用 div 元素。

<div class="image-text">
<img src="example.jpg" alt="Example">
<p>这是一张示例图片。</p>
</div>

接下来，我们将使用 CSS 来使图片和文字排列在同一行。我们可以使用 display 属性为元素设置为 inline-block，这样它们就可以在同一行显示了。

.image-text {
display: inline-block;
}
.image-text img {
vertical-align: middle;
}
.image-text p {
display: inline-block;
margin-left: 10px;
}

现在，我们在 CSS 文件中添加一些样式。我们设置 image-text 类的 display 属性为 inline-block。这样图片和文字就可以在同一行上显示了。 我们还需要为图片设置垂直对齐属性，这样它们就可以与文字在水平方向上对齐。我们使用了 vertical-align: middle。 最后，我们为段落添加了 margin-left 属性，这样它就可以与图片之间产生一些空隙。 以上就是如何使用 CSS 让图片和文字在同一行显示的方法。祝你好运！