CSS-3 - 如何在两列上方放置一个空白区域？

Question

我知道如何使用 CSS 制作列。

但是谁能告诉我我该怎么做才能像图片中显示的那样？

空白横跨后两列。

Answer 1

我能想到的唯一解决方案是在包含文本的元素中使用两个元素。然后使用 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}

演示: http://jsfiddle.net/NRFT3/4/

在 firefox 中结果是异常的，但 chrome 破坏了它。我添加了一个使高度更大的 hack，这改进了它但并没有使它与 firefox 相同。也许有一些额外的技巧可以在两种浏览器中为您提供相同的结果。