3

あなたに問題を示すための写真：

列化されたテキストのdivはフロートしません

列化された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/

4

4 に答える 4

2

削除する

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から

于 2012-11-20T05:33:04.633 に答える
0

p：first-of-type {-moz-column-count：2;を削除します。-moz-column-gap：20px; -webkit-column-count：2; -webkit-column-gap：20px; 列数：2; column-gap：20px;} cssから、2列のレイアウトのように見えるようにします。

于 2012-11-20T05:45:36.267 に答える
0

この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;}​
于 2012-11-20T05:52:09.747 に答える
0

Ok。私がやりたかったことは実際には不可能です。http://www.w3.org/TR/css3-multicol/

しかし、可能なこと（そして私が実際にやりたかったこと）は、列化されたテキストでimgをフロートさせることです。

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

フィドルを参照してください：http：//jsfiddle.net/mmYQQ/6/

于 2012-11-21T09:50:14.563 に答える