怎么让图片元素和文字元素位于同一行

为了让图片元素和文字元素在同一行显示，你可以使用CSS的`display`和`flexbox`、`grid` 或 `inline-block` 属性。这里有几个常见的方法：

### 1. 使用 `display: inline-block` 或 `display: flex`
- 对于图片元素，将其`display`属性设置为`inline-block`或`flex`（如果容器也是`display: flex`）。
- 文字元素保持默认的`display`值即可。

<div style="display:flex;">
  <img src="..." alt="...">
  <span>这是文字</span>
</div>

### 2. 使用 `display: grid`
- 设置包含这两个元素的容器的`display`属性为`grid`。
- 可以使用`grid-template-columns`设置列宽，例如`grid-template-columns: auto 1fr`表示自动分配宽度给第一个项目，剩下的空间平均分配给第二个项目。

<div style="display:grid; grid-template-columns: auto 1fr;">
  <img src="..." alt="...">
  <span>这是文字</span>
</div>

### 3. 自适应宽度的图片和文本
- 图片设置`max-width: 100%`以适应其父元素宽度，而文字保持默认宽度。
- 可以使用`float`或`clearfix`清除浮动（虽然现代布局推荐使用Flexbox或Grid），但这不是HTML5推荐的方式。

<div style="width:100%; overflow:hidden;">
  <img src="..." alt="..." style="max-width:100%; float:left;">
  <span style="float:right;">这是文字</span>
</div>