html - 如何使 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

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

但是有可能（也是我真正想做的）是让 img 在列文本中浮动。

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

参考小提琴：http: //jsfiddle.net/mmYQQ/6/

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

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