将多列 div 包裹在图像周围

Question

这个问题几乎与如何添加浮动图像而不使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;
}

我这里有一个jsfiddle： http://jsfiddle.net/JpcM4/2/

挑战在于我不知道 div 中有多少文本，也不知道图像有多宽。这意味着我不能只为四列设置四个 div 并分别浮动它们，因为我不知道每列中的文本是什么，甚至不知道哪些列将被图像缩短。

我还查看了column-span和-webkit-column-span（无论如何它不适用于Firefox），但似乎这不是我的想法：http ://www.w3.org/TR/css3-multicol /

Answer 1

看看这个小提琴。我从 中删除了column-counts 和column-widths div。我这样做是因为不幸的是，并非所有列都适合 div 的左侧，因此您不能在其正下方放置文本。 这里有一个小技巧可以做到这一点，因为它不能纯粹在 css 中完成，所以技巧是创建两个不同的div：一个在左边，一个在右边（float:left另一个在下面）。

.thumbimage {
    float: right;
    clear:none;
    padding: 0px 0px 0px 5px;
}