使用包裝文本的JS/CSS創建大綱

Question

假設您有一張包含float:left;的圖像和一個圍繞圖像流動的文本。

的代碼非常簡單：

<img src="image.jpg" style="float:left"> 
<p style="outline: 1px dotted blue">Lorem ipsum...</p> 

是否有顯示的大綱，圍繞文本換行，但周圍沒有形象的一種方法。在文本上正常的輪廓讓你：

但我想這一點：

在<p>顯示器使用display:inline;在每一行，而不是「按塊」的輪廓在文本的可見邊界。

CSS3是合法的，任何硬派的CSS/JS是允許的......

Answer 1

你可以嘗試這樣的事情。向上和向左移動圖像，以便遮擋常規邊框。然後給它自己的邊界來完成幻覺。

<article> 
<img src="image.jpg" style="float:left"> 
<p>Lorem ipsum...</p> 
</article> 


article { 
border: 1px blue dotted; 
} 

img { 
background-color: white; 
border-right: 1px blue dotted; 
border-bottom: 1px blue dotted; 
margin: -1px 0 0 -1px; 
padding: 0 5px 10px 0; 
} 

這裏的小提琴：http://jsfiddle.net/KW45t/

Answer 2

入住此的jsfiddle http://jsfiddle.net/pollirrata/rKaHk/1/

這不是幻想，但使工作