CSS-3-如何在两列上方放置空白保持架？

我知道如何使用CSS制作列

但是有谁能告诉我，我是如何做的喜欢在图片中显示？

---

空白区域跨越后两列

我能想象的唯一解决方案是在包含文本的元素中使用两个元素。然后使用

float:right

看起来就像一个例子。如果要定位图像或另一个

div

，可以使用上面的

position:absolute

下面是一个css示例：

div {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
    position:relative;
    width:800px;
}

.whitearea {
    width:250px;
    height:200px;
    float:right;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
     .webkit {height:350px;}
}
img {position:absolute;right:0}

演示：

---

在firefox中，结果也是例外，但chrome破坏了它。我添加了一个使高度更大的hack，这改进了高度，但与firefox不同。也许还有一些额外的技巧可以在两个浏览器中给出相同的结果。

@ Jackson故事删除代码> @媒体屏幕和（-WebKIT Min设备像素比率：0）{WebKik{Health:350Px；} }/Cord>我发现你在文本中间设置了空白区域的跨度。但对于我的问题，我无法找出在html中放置空白范围的位置。实际上，我正在做的是从谷歌阅读器的新闻条目中检索文本。并尝试以图片所示的方式显示文本和图像。因此，我不知道在哪里拆分文本，这样我就可以在其中插入空格。也许使用javascript，您可以计算字符数，并找到具有直接空格的最近点。然后可以附加一个跨度元素。我不确定这是否有效，但试试看