CSS-3 -如何将空白符放置在两列之上？
CSS-3 -如何将空白符放置在两列之上？
提问于 2011-07-17 20:47:28
我知道如何用CSS制作专栏。
但是谁能告诉我我是怎么做的，就像图中所示的那样？
空格横跨后两列。
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-07-17 22:24:20
我能想到的唯一解决方案是在包含文本的元素中使用两个元素。那么使用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相同。也许还有一些额外的技巧可以让你在两个浏览器中得到相同的结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6723883
复制相关文章
相似问题
腾讯云开发者
