看看这个小提琴。我从
这个问题几乎与如何在不使CSS3多列div变窄的情况下添加浮动图像相同？，没有人回答。
我有一个多列div，我想把它包裹在一个浮动在页面右上角的图像周围。问题是多列div中的文本没有换行，即使div设置为浮动。
应该看起来像：
|-||-|xxxxxx
|-||-|xxxxxx
|-||-|xxxxxx
|-||-||-||-|
|-||-||-||-|
目前看起来像：
xxxxxx
xxxxxx
xxxxxx
|-||-||-||-|
|-||-||-||-|
|-||-||-||-|
HTML：
<img src="something.png"/>
<div>some really long text</div>
CSS：
img {
float: right;
clear:none;
}
div {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-width:157px; /* Firefox */
-webkit-column-width:157px; /* Safari and Chrome */
column-width:157px;
float:left;
clear:none;
}
我这里有一把小提琴：http://jsfiddle.net/JpcM4/2/
挑战在于，我不知道div中有多少文本，也不知道图像有多宽。这意味着我不能只为四列设置四个div并分别浮动它们，因为我不知道每列中有什么文本，甚至不知道图像会缩短哪些列。
我还查看了span列和-webkit span列(无论如何都不适用于Firefox)，但这似乎不是我所想的：http://www.w3.org/TR/css3-multicol/
div中删除了column-counts和column-widths。我之所以这么做，是因为不幸的是，并不是所有列都能放在div的左边，所以你不能在它的正下方有文本。这里有一个小技巧，因为它不能在css中纯完成，所以这个技巧是创建两个不同的div：一个在左边，一个在右边(float:left和另一个在下面)。
.thumbimage {
float: right;
clear:none;
padding: 0px 0px 0px 5px;
}