将多列 div 包裹在图像周围答案

【问题标题】：wrap multi-column div around image将多列 div 包裹在图像周围
【发布时间】：2014-01-07 21:55:45
【问题描述】：

这个问题与How to add floating image without making CSS3 multicolumn div narrower? 几乎相同，没有回答。

我有一个多列 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/

【问题讨论】：

您的文本低于图像的原因是没有明确的宽度，<div> 的默认宽度为 100%。不幸的是，如果宽度小到可以放在图像旁边，那么整个<div> 的宽度就会被卡住，因此图像下方不会出现任何文字。

标签： html css multiple-columns

【解决方案1】：

看看this 小提琴。我从div 中删除了column-counts 和column-widths。我这样做了，因为不幸的是，不是所有列都可以放在 div 的左侧， 所以你不能在它的正下方放置文本。 Here's 做一个小hack，因为它不能纯粹在css中完成，所以hack是创建两个不同的div：一个在左边，一个在在右侧（float:left 和其他下方）。

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

【讨论】：

小提琴不见了。