两列上的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，但是这会破坏文本流，它现在是两个带有列的块，一个在图像上方，一个在图像下方，但我想保持通常的流量并分离单个列。

Answer 1

这是column-span，因为它是defined，应该这样做：

  

示例XX

     

在此示例中，h2元素具有   已添加到示例文档中   在第四句第一句之后   句子（即在单词之后）   “JKL”）。这种造型适用：

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

     

将'column-span'设置为'all'，全部   在h2之前出现的内容   元素显示在h2之前   元件。

您需要的是CSS3 Exclusions或CSS3 Positioned floats。不幸的是，还没有发布的浏览器支持（并且很可能在浏览器开始添加支持之前合并两个规范）。

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