html如何将图片和文字放在同一行

要在HTML中将图片和文字放在同一行，可以使用CSS的display: inline-block;或者float属性。下面是两种常见的方法：

方法一：使用 display: inline-block;

<style>
    .container {
        white-space: nowrap; /* 防止换行 */
    }

    .container img,
    .container p {
        display: inline-block;
        vertical-align: middle;
    }
</style>

<div class="container">
    <img src="your-image.jpg" alt="Image">
    <p>Your Text Here</p>
</div>

在上述示例中，.container 类用于包裹图片和段落（文字）。通过将图片和段落都设置为 display: inline-block; 并使用 vertical-align: middle; 属性对齐它们的垂直方向，从而使它们在同一行显示。

方法二：使用 float

<style>
    .container::after {
        content: "";
        display: block;
        clear: both;
    }

    .container img {
        float: left;
    }

    .container p {
        float: left;
        margin-left: 10px; /* 可根据需要调整图片与文字之间的间距 */
    }
</style>

<div class="container">
    <img src="your-image.jpg" alt="Image">
    <p>Your Text Here</p>
</div>

在上述示例中，通过给 .container 添加一个伪元素 ::after 并清除浮动，以防止后续元素受到影响。然后，通过给图片和段落都设置 float: left;，使它们在同一行左浮动显示。使用 margin-left 可以调整图片与文字之间的间距。

这两种方法都可以实现将图片和文字放在同一行的效果。您可以根据自己的需求选择适合的方法，并根据需要进行样式调整。