自訂文字流以環繞不規則邊框可以增強網站或應用程式的視覺吸引力。本文探討了 Tory Lawson 在其 2011 年部落格文章「圍繞非矩形形狀環繞文字」中提出的方法。
使用圖像編輯程序,透過繪製表示文字應結束位置的邊界線來確定所需的文字邊界。
定期測量環繞區域的寬度(例如,每 10 個像素)。記錄這些值作為間隔 div 的寬度。
標記:
<body> <div>
CSS:
#wrapper { width:634px; height:428px; display:block; background-image:url("headshot.jpg"); } .spacer{ display:block; float:right; clear:right; } p { display:inline; color:#FFF; }
這種技術浮動div來阻擋形狀的區域,允許文字環繞非矩形圖像,同時與其邊框保持一致的距離。
將文字環繞非矩形影像需要自訂方法。雖然沒有直接的 CSS 解決方案,但本文介紹的方法可以有效達到預期效果。
以上是如何使用 CSS 和 Div 將文字環繞不規則圖像?的詳細內容。更多資訊請關注PHP中文網其他相關文章!