image - CSS 在两列上显示图像(列数分隔)

Question

我有一个分成两列的 div，使用:

column-count: 2;
column-gap: 20px;

在里面我现在有一张图片:http://img823.imageshack.us/img823/6710/herpt.png 我希望这张图片出现在两列上，所以我尝试了

    column-span:all

http://img339.imageshack.us/img339/8664/derpv.png , 但这会破坏文本流，它现在有两个带有列的 block ，一个在图像上方，一个在图像下方，但我想保持通常的流程并将单个列分开。

Answer 1

这就是column-span，因为它是defined , 应该做的:

Example XX

In this example, an h2 element has been added to the sample document after the first sentence in the fourth sentence (i.e., after the word "jkl."). This styling applies:

h2 { column-span: all; background: silver }  
img { display: none }

By setting ‘column-span’ to ‘all’, all content that appear before the h2 element is shown before the h2 element.

为此你需要的是 CSS3 Exclusions或 CSS3 Positioned floats .不幸的是，还没有发布的浏览器支持这两种规范(并且很可能在浏览器开始添加支持之前合并这两个规范)。

Adobe 有一个 prototype WebKit based implementation of Regions and Exclusions你可以尝试一下。如果你有 IE10 Developer Preview 2，there's a demo of positioned floats available here .