在图像周围包裹多列div

时间:2014-01-07 21:55:46

标签: html css css3 multiple-columns

此问题几乎与How to add floating image without making CSS3 multicolumn div narrower?完全相同,但未得到回答。

我有一个多列div,我想环绕一个将浮动在页面右上角的图像。问题是多列div中的文本不会换行,即使div设置为float。

应该是这样的:

|-||-|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/

1 个答案:

答案 0 :(得分:1)

看看this小提琴。我从column-count删除了column-widthdiv s。我这样做了,因为遗憾的是所有列都不能放在 div 的左侧,所以你不能直接在它下面放置文字。 Here's这是一个很小的黑客,因为它无法在css中完成 ,所以黑客就是在左边创建两个不同的 div:,一个在右边(float:left和其他下面)。

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