使用包装文本的JS / CSS创建大纲

Question

假设您有一张float:left;的图片以及在图片周围流动的文字。

代码非常简单：

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

有没有办法显示轮廓，包裹文本但不包围图像。文本上的正常轮廓为您提供：

但我想要这个：

使用display:inline;上的<p>会在每行显示一个大纲，而不是＆＃39; blockwise＆＃39;文本的可见边界。

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/

这不是花哨但是能够完成工作