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