如何使用浮動 Div 將文字環繞不規則形狀的圖像？

如何在不規則形狀的圖像周圍環繞文字

在圖像周圍環繞文字是一種常見的佈局技術，但如果您的圖像不是一個簡單的矩形？您還能創造優雅的環繞效果嗎？

在本文中，我們將探索 Tory Lawson 提出的一種方法，該方法允許您透過使用浮動 div 封鎖形狀區域來將文字環繞在不規則形狀的圖像周圍。

第 1 步：定義環繞區域

將影像上下翻轉並繪製一個您希望文字結束的邊界線，考慮到間隙的小填充。使用網格系統確保與影像邊框的距離一致。

第 2 步：建立測量清單

每 10 個像素測量輪廓的寬度並寫入沿著紙上的 x 座標。這將指導阻塞 div 的間距。

第 3 步：建立標記和 CSS

定義一個包裝 div 來包含圖片和阻塞 div。在包裝器內部，建立間隔 div 並根據您在步驟 2 中收集的測量值設定其寬度。

<div>

#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}

.spacer {
  display: block;
  float: right;
  clear: right;
}

p {
  display: inline;
  color: #FFF;
}

透過執行以下步驟，您將能夠有效地將文字環繞在任何不規則的周圍形狀的圖像，為您的設計帶來獨特而精緻的外觀。雖然 CSS 中可能沒有簡單的「文字換行」選項，但此解決方法提供了可靠且美觀的解決方案。

以上是如何使用浮動 Div 將文字環繞不規則形狀的圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！