CSS在圖像周圍包裹文字

Question

對於這個我一直在建設的網站，我需要以某種方式顯示內容，我有一個縮略圖，兩個屏幕截圖和一個大約500個單詞的文本塊。 我需要在縮略圖和屏幕截圖周圍添加文字。 目前，我正在使用PHP substring來分解單詞的內容，並在需要的地方顯示它們，但這無法正常工作，因為每個瀏覽器上的文本顯示都不同，我需要一個靈活的解決方案，您可以看到我的頁面示例在談論這里時 ，我需要使圖像保持原樣，但文字要環繞圖像而不是在應該有更多單詞的地方留出怪異的間距。 感謝您的任何幫助！

Answer 1

只需浮動圖像即可解決問題。 這是一個示例： http : //jsfiddle.net/agrublev/a5RJN/

<img src="xx.jpg" style="float:left;">

Answer 2

您可以嘗試將align =“ left”賦予將包含在p中的圖像。

<img src="#" align="left" style="margin-right:10px;">

Answer 3

如果您知道要在其中放置帶孔的單詞（圖片）的空間的大小（寬度，高度），則可以生成SVG。 優點：它可以在所有瀏覽器中使用，並且您可以隨意放置自己喜歡的單詞（甚至可以旋轉它們）。

當然，您可以將生成的SVG用作小部件。

Answer 4

我發現了一個可能對您有用的代碼示例。 當然，使用position屬性將無濟於事，因為單詞不會環繞它。 但是也許將圖像包裝在div中並像這樣使用邊距可以有所幫助。

http://codepen.io/atomworks/pen/algcz