在 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-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 屬性包裝文字包裝器。與前面的包裝器類似，它將文字內容放在影象旁邊。
