这个问题几乎与How to add floating image without making CSS3 multicolumn div narrower?相同,没有人回答。
我有一个多列的 div,我想将它环绕在将 float 在页面右上角的图像周围。问题是多列 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 并分别 float 它们,因为我不知道每列中的文本是什么,甚至不知道图像会缩短哪些列。
我还查看了 column-span 和 -webkit-column-span(无论如何都不适用于 Firefox),但似乎这不是我想的:http://www.w3.org/TR/css3-multicol/
最佳答案
看this fiddle 。我从 div
中删除了 column-count
和 column-width
。我这样做是因为不幸的是,所有 列都不能放在 div 的左侧, 因此您不能在其正下方放置文本。 Here's一个小 hack 来做到这一点,因为它不能纯粹在 css 中完成,所以 hack 是创建两个不同的 divs: 一个在左边,一个在右边(float:left
和下面的其他内容)。
.thumbimage {
float: right;
clear:none;
padding: 0px 0px 0px 5px;
}
关于html - 将多列 div 包裹在图像周围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20982768/