开发者

CSS-3 - How can I place a white space holder above two columns?

I know how to make columns with CSS.

But Can anyone tell me how do I do like shown in the pic开发者_StackOverflow?

CSS-3 - How can I place a white space holder above two columns?

The white space span the latter two columns.


The only solution I can image is to use two elements within the element that contains the text. Then using float:right can seem like one. If you want to position an image, or another div, above you can use position:absolute.

here an example 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}

Demo: http://jsfiddle.net/NRFT3/4/

In firefox the result is as excepted, but chrome breaks it. I added a hack that make the height bigger, this improve it but doesn't make it the same as firefox. Maybe there are some additional tricks that can give you the same result in both browsers.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜