文字可以環繞不規則形狀的圖像嗎？

文字可以環繞非矩形影像嗎？

將文字環繞非矩形圖像是網頁設計中的常見挑戰。考慮這樣的情況：您有不同國家/地區的地圖，並且您希望文字環繞該國家/地區的形狀，與邊界保持一致的距離。有可能實現這一點嗎？

解決方案

是的，可以使用Tory Lawson 在其2011 年概述的技術將文本包裹在非矩形圖像周圍博客文章“將文本環繞非矩形形狀」。此方法涉及浮動 div 來遮蔽形狀區域：

第 1 步：定義環繞區域

• 確定文字和圖像邊框之間所需的距離。
• 在編輯程式中開啟影像並覆蓋網格。
• 繪製一個表示文字應結束位置的邊界形狀，考慮填充（例如 5 像素）。

第 2 步：建立寬度測量清單

• 測量固定間隔的包裹區域的寬度（例如，每 10像素）。
• 將這些測量值記錄在一張紙上。

第 3 步：建立 Div

• 建立一個 div充當圖像和文字的包裝器。
• 為每個寬度創建額外的div

CSS

注意： 這種方法並不像使用CSS「文字換行」那麼簡單選項，但它允許精確控製文字換行行為。

以上是文字可以環繞不規則形狀的圖像嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！