迹忆客 专注技术分享

这篇文章解释了使用 HTML 和 CSS 在图像旁边放置文本的方法。

在 HTML 中使用 float CSS 属性将文本放置的图像旁边

我们可以使用 float CSS 属性来定义元素如何浮动。元素可以向右或向左浮动。其他一些选项是 none，这意味着元素不会浮动，而 inherit 将展示其父元素的行为。我们使用 float 属性来指定元素的定位和格式。我们还可以使用该属性在图像旁边放置文本。

我们可以通过用 div 包裹图像和文本内容来轻松实现以下样式。HTML 的结构应如下所示。

<div>
    <div>
        <img src="url" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

现在 HTML 已经结构化，我们可以将 CSS 添加为内联、内部或外部。在这个例子中，我们将使用内联 CSS 实现样式。首先，将 float 属性设置为 left 以用于 div 包装图像。使用 URL https://loremflickr.com/320/240 作为图像源。接下来，编写你选择的任何文本并用另一个 div 包裹它。

代码示例：

<div>
    <div style="float: left">
        <img src="https://loremflickr.com/320/240" />
    </div>
    <div>
        Text content goes here
    </div>
</div>

在这里，属性 float: left 被赋予图像的包装器。float: left 属性会将图像放置在左侧，另一个包装文本内容的包装器将放置在图像旁边。通过这种方式，我们可以使用 CSS float 属性在图像旁边放置文本。

在 HTML 中使用 display: inline-block 和 vertical-align: top 将文本放的图像旁边

我们可以使用 display 和 vertical-align 属性在 HTML 中的图像旁边放置文本。display 定义了元素在 HTML 中的显示方式。我们可以将元素的显示属性设置为 inline、inline-block、block 等。当我们将 display 分配给 inline-block 时，它会使元素成为内联元素，但我们仍然可以为它设置 height 和 width 属性。因此，我们将能够将文本放在图像旁边。vertical-align 属性定义元素的垂直对齐方式。当我们使用值 top 时，元素将与行中最高元素的顶部对齐。

在这里，我们可以再次构建我们的代码如下。

<div>
    <img src="" alt="img"/>
</div>
<div>
    <p>
        Text Here,
    </p>
</div>

例如，将图像包装器 div 的 display 属性设置为 inline-block，将 vertical-align 属性设置为 top。至于包装器，文本的 div 将 display 属性设置为 inline-block。

代码示例：

<div style="display:inline-block;vertical-align:top;">
    <img src="https://loremflickr.com/320/240" alt="img"/>
</div>
<div style="display:inline-block;">
    <p>
    Here goes the text content.
    </p>
</div>

在这里，属性 display: inline-block 设置包装图像的包装器的属性为内联块属性。inline-block 选项不会在元素旁边添加换行符。因此，元素将彼此相邻对齐。我们再次使用 display: inline-block 属性包装文本包装器。与前面的包装器类似，它将文本内容放在图像旁边。