如何在列化文本上创建div浮点数

Question

向您展示此事的图片：

我希望列化的p的行为类似于未列的p，并且它的文本可以围绕div进行整形。

这里是html：

<div>hey, I should float !</div>
<p>Velit porttitor mattis nisi sit magnis nec et nunc pellentesque! Pulvinar est! Nunc massa, dapibus eu etiam ut? Enim eu vut porta scelerisque auctor auctor, integer. Natoque elit? Vel elit nunc nunc? Rhoncus platea tortor, et, velit integer dis, etiam elementum cursus? Ac cum scelerisque! Sit est turpis duis pid scelerisque eu nec lectus. Nascetur mattis.<p>
<hr>
<div>hey, I should float !</div>
<p>Velit porttitor mattis nisi sit magnis nec et nunc pellentesque! Pulvinar est! Nunc massa, dapibus eu etiam ut? Enim eu vut porta scelerisque auctor auctor, integer. Natoque elit? Vel elit nunc nunc? Rhoncus platea tortor, et, velit integer dis, etiam elementum cursus? Ac cum scelerisque! Sit est turpis duis pid scelerisque eu nec lectus. Nascetur mattis.<p>

这是CSS：

p:first-of-type{-moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px;}
p{text-align: justify;}
div{background: #c00;  height: 20px; width: 150px; float: right; margin: 10px; padding: 10px;}​

我的浮动div发生了什么：'（

这是一个jsFiddle：http://jsfiddle.net/mmYQQ/

Answer 1

删除

p:first-of-type{-moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px;}

来自css

Answer 2

删除 p：first-of-type {-moz-column-count：2; -moz-column-gap：20px; -webkit-column-count：2; -webkit-column-gap：20px;列数：2;来自css的column-gap：20px;} ，它使它看起来像两列布局。

Answer 3

请参阅此Jsfiddle

试试这个Css：

p{text-align: justify;}
#media{float:left;width:100%;}
#media .img{float:right;width:30%;background:#f00;color:#fff;margin-left:20px;}
.clearfloat{clear: both;height: 0;font-size: 1px;line-height: 0px;}​

Answer 4

确定。我想做的事实际上是不可能的。 http://www.w3.org/TR/css3-multicol/

但是可能的（以及我真正想做的）是在列文本中创建一个img float。

img{background: #c00;  height: 40px; width: 50px; float:right; margin: 10px;}

比照小提琴：http://jsfiddle.net/mmYQQ/6/