看看任何網頁，你會看到文本內容和圖像的組合。 這兩個要素都是網站成功的基本要素。 文本內容是網站訪問者將要閱讀的內容以及搜索引擎將用作其排名算法的一部分。 圖像將增加網站的視覺興趣，並有助於突出文字內容。
向網站添加文字和圖片很簡單。 文本添加了標準的HTML標籤，如段落，標題和列表，而圖像則放在具有元素的頁面上。 但是，一旦將圖像添加到網頁中，您可能希望文本在圖像旁邊流動，而不是在圖像下方對齊（這是添加到HTML代碼的圖像將在瀏覽器中呈現的默認方式）。 從技術上講，通過使用CSS（推薦）或將可視指令直接添加到HTML中 （不建議，因為您希望保持網站樣式和結構的分離），您可以通過兩種方式實現此外觀。
使用CSS
改變頁面文本和圖像佈局以及瀏覽器中視覺樣式的方式的正確方法是使用CSS 。 請記住，因為我們正在討論頁面上的視覺變化（使文本在圖像周圍流動），這意味著它是層疊樣式表的域。
- 首先，將您的圖片添加到您的網頁上。 請記住從該HTML中排除任何視覺特徵（如寬度和高度值）。 這一點很重要，特別是對於圖像大小因瀏覽器而異的響應式網站 。 某些軟件（如Adobe Dreamweaver）會將寬度和高度信息添加到使用該工具插入的圖像中，因此請務必從HTML代碼中移除此信息！ 但是，請確保包含適當的替代文字 。 以下是HTML代碼外觀的一個例子：
-
>
-
- 為了造型的目的，你也可以添加一個類到圖像。 這個類的值是我們將在我們的CSS文件中使用的。 請注意，我們在這裡使用的值是任意的，但對於這種特定的樣式，我們傾向於使用“左”或“右”值，具體取決於我們希望圖像對齊的方式。 我們發現簡單的語法可以很好地工作，對於其他未來可能需要管理站點的人來說也很容易理解，但是您可以為此提供任何您想要的類別值。
-
- 本身，這個類的價值不會做任何事情。 圖像不會自動對齊到文本的左側。 為此，我們現在需要轉向我們的CSS文件。
-
- 在您的樣式表中，您現在可以添加以下樣式：
- 。剩下 {
- 向左飄浮;
- padding：0 20px 20px 0;
- }
- 你在這裡做的是使用CSS的“float”屬性 ，它將從普通的文檔流中拉出圖像（圖像通常顯示的方式，文本在其下面對齊），並將它對齊到它的容器的左側。 HTML標記中的文本現在環繞它。 我們還添加了一些填充值，以便該文本不會直接影響圖像。 相反，它會有一些很好的空間，這在頁面設計中會具有視覺吸引力。 在用於填充的CSS簡寫中，我們向圖像的頂部和左側添加了0個值，左側和底部添加了20個像素。 請記住，您需要在左對齊圖像的右側添加一些填充。 右對齊的圖像（我們稍後會看到）將在其左側應用填充。
- 如果您在瀏覽器中查看您的網頁，現在應該看到您的圖像與頁面的左側對齊，並且文本很好地包裹了它。 另一種說法是，圖像是“漂浮在左邊”。
- 如果您想要將此圖像更改為向右對齊（如本文附帶的照片示例中所示），則會很簡單。 首先，除了剛添加到我們的CSS中的“左”類值之外，還必須確保我們有一個用於右對齊的樣式。 它看起來像這樣：
- 。對 {
- float：right;
- padding：0 0 20px 20px;
- }
- 你可以看到，這與我們寫的第一個CSS幾乎相同。 唯一的區別是我們用於“float”屬性的值以及我們使用的填充值（將一些添加到圖像的左側而不是右側）。
- 最後，您可以在HTML中將圖像類的值從“左”改為“右”：
-
- 現在在瀏覽器中查看你的頁面，你的圖片應該與文字整齊地包裹在一起。 我們傾向於在所有樣式表中添加這兩種樣式，“左”和“右”，以便我們在創建網頁時根據需要使用這些視覺樣式。 這兩種樣式變得很好，可重複使用的功能，我們可以轉向任何時候我們需要風格的圖像文字環繞他們。
使用HTML而不是CSS（以及為什麼你不應該這樣做）
儘管可以使用HTML對圖像進行換行文本，但Web標準規定CSS（以及上述步驟）是要走的路，以便我們可以保持結構（HTML）和样式（CSS）的分離。 當您考慮到某些設備和佈局時，文本可能不需要在圖像周圍流動，這一點尤其重要。 對於較小的屏幕，響應式網站的佈局可能會要求文本確實在圖像下方對齊，並且圖像拉伸了整個屏幕的寬度。 如果您的樣式與HTML標記分開，則可以通過媒體查詢輕鬆完成。 在今天的多設備世界中，對於不同的訪問者和不同的屏幕，圖像和文本的顯示方式會有所不同，這種分離對於網頁的長期成功和管理至關重要。