卡卡網(wǎng)

之前 HTML 版本中的一些 IMG 屬性在 HTML5 中已被棄用。最常用的屬性之一是圖像對(duì)齊屬性。你有很多選擇：

Absbottom
Absmiddle
Bottom
Middle
Left
Right
Texttop
Top

所以你可以這樣做：

<IMG SRC="images/1.jpg" ALIGN="top">

你在這里所做的是將文本包裝在圖像周圍。你沒(méi)有對(duì)齊獨(dú)立于文本的圖像。你說(shuō)的是“將文本包裝到圖像的頂部”。

在 HTML5 中，文本換行是使用 CSS 完成的。讓我們看看如何獲??得以下樣式：

demodownload

如你所見(jiàn)，圖像在右側(cè)，文本在其周圍流動(dòng)。圖像和文本之間也有空間。

首先要做的是在 HTML 的 HEAD 部分設(shè)置 STYLE。將突出顯示的代碼添加到您自己的 HTML 中： 

<style type="text/css">
.TextWrap{
  float: right;
  margin: 10px;
}
</style>

我們?cè)O(shè)置的樣式稱為 TextWrap。在兩個(gè)大括號(hào)之間，我們有這個(gè)：

float: right;
margin: 10px;

移動(dòng)圖像所需的 CSS 屬性稱為float。float 屬性可以取三個(gè)值：left、right 和 none。要在圖像和文本之間留出一些空間，我們可以使用margin屬性。我們已將其設(shè)置為 10 像素。這將為你提供整個(gè)圖像周圍的空間。如果你只想要圖像特定側(cè)面的空間，你可以使用這些：

margin-left
margin-right
margin-top
margin-bottom

所以我們可以這樣做：

margin-left: 10px;
margin-bottom: 10px;

這將使我們?cè)趫D像左側(cè)獲得 10 像素的邊距，在底部獲得 10 像素的邊距。

要將樣式應(yīng)用于圖像，你需要將 CLASS 屬性添加到 IMG 標(biāo)簽：

<IMG SRC="images/1.jpg" CLASS="TextWrap">

CLASS 屬性不必放在最后。如果你愿意，可以將其放在 IMG 標(biāo)簽之后：

<IMG CLASS="TextWrap" SRC="images/1.jpg">

只需注意上面代碼中所有空格的位置。

修改你自己的 IMG 標(biāo)簽并將 CLASS="TextWrap" 添加到你自己的 IMG 代碼中。在你嘗試之前，請(qǐng)?jiān)趫D片下方添加一段文字：

<img src="1.png" class="TextWrap">
<p>
有多少次你在尋找時(shí)感到沮喪
獲取編程/算法的良好集合
/面試問(wèn)題？你期望什么？什么
你明白了嗎？創(chuàng)建此門戶的目的是：
提供良好的書面、深思熟慮和良好的
解釋選定問(wèn)題的解決方案。
IIT最喜歡解決編程問(wèn)題
有效的方法。
</p>

請(qǐng)確保你的 IMG 代碼位于第一個(gè) P 標(biāo)簽之上。

保存并在瀏覽器中查看結(jié)果。

但是，上面的代碼有一個(gè)問(wèn)題。假設(shè)我們想要第二段文本，另一個(gè)圖像浮動(dòng)在左側(cè)。我們想要這樣做：

demodownload

在這里，第二張圖像很好地對(duì)齊在第一張圖像的下方和左側(cè)。文本也在正確的位置。

為此，你可能會(huì)考慮添加第二個(gè)樣式，然后將其應(yīng)用于第二個(gè)圖像。像這樣： 

.TextWrap{
  float: right;
  margin: 10px;
}
.TextWrapLeft{
  float: left;
  margin: 10px;
}
<img src="1.png" class="TextWrapLeft"> 

在第二種樣式中，我們使用了float:left并像以前一樣添加了 10 像素的邊距。在第二個(gè) IMG 標(biāo)記中，我們使用了新的 TextWrapLeft 類。

在這個(gè)版本中，文本不是流動(dòng)的，第二段的開(kāi)頭被圖片隔斷了。

糾正這個(gè)問(wèn)題的方法是使用一個(gè)名為clear的 CSS 屬性。這會(huì)清除所有浮動(dòng)元素并讓你回到瀏覽器的正常默認(rèn)流程。clear 屬性可以取四個(gè)值：left、right、both、none。因?yàn)槲覀兊牡谝粋€(gè)圖像是向右浮動(dòng)的，所以我們想要清除到右側(cè)。我們可以將其添加到第二種樣式中：

.TextWrapLeft{
  float: left;
  margin: 10px;
  clear: right;
}

如果我們的第一張圖片在左邊，我們會(huì)使用clear: left。

輸出結(jié)果如下圖。

demodownload

相關(guān)文章

• [3示例]如何用CSS實(shí)現(xiàn)文本環(huán)繞圖像
• 純CSS：將圖片漂浮固定在某DIV內(nèi)右下角

標(biāo)簽: css  文本環(huán)繞圖像