在 HTML 中将文本放在图像旁边

Ashok Chapagai 2023年2月19日 2022年1月2日
  1. 在 HTML 中使用 float CSS 属性将文本放置的图像旁边
  2. 在 HTML 中使用 display: inline-blockvertical-align: top 将文本放的图像旁边
在 HTML 中将文本放在图像旁边

这篇文章解释了使用 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-blockvertical-align: top 将文本放的图像旁边

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

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

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

例如,将图像包装器 divdisplay 属性设置为 inline-block,将 vertical-align 属性设置为 top。至于包装器,文本的 divdisplay 属性设置为 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 属性包装文本包装器。与前面的包装器类似,它将文本内容放在图像旁边。

Ashok Chapagai avatar Ashok Chapagai avatar

Ashok is an avid learner and senior software engineer with a keen interest in cyber security. He loves articulating his experience with words to wider audience.

LinkedIn GitHub

相关文章 - HTML Text

相关文章 - HTML Image