在 html 中将文本放在图像旁边-ag捕鱼王app官网

这篇文章解释了使用 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 属性包装文本包装器。与前面的包装器类似，它将文本内容放在图像旁边。