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打破了它。我添加了一个使高度更大的黑客，这改进了它但不会使它与firefox相同。也许有一些额外的技巧可以在两种浏览器中给你相同的结果。