在 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