css专栏,如报纸和div与媒体

Question

我试图找到一个解决方案,能够通过css,js或php编写类似附加图像的代码.

我希望我的文章有三列.在最后两列之上,为文章的媒体增加了一个额外的div.

与教程或css位置技巧的链接是无价的!

提前致谢...

图片链接:http://my.greview.gr/css_newspaper.png

---

它可以解决这个解决方案的部分列,并且在这种情况下我不关心浏览器交叉,但这里的问题是我如何配置媒体div的位置,在最后两列之上,并防止文本重叠主要文章!

Answer 1

如果您使用的是现代浏览器,则可以使用columncss3中的位

div#multicolumn1 {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

在这里阅读更多内容:http://www.quirksmode.org/css/multicolumn.html

使其适用于两列上的图片的一种方法是执行以下操作:

1. 设置一个wrapper div,给它一个position:relative

2. 设置你的multicolumn div,给它一个fixed宽度

3. 添加两个spacer spans,每个列对应一个想要让图像跨越的列.将它们设置为display: block. 注意,您需要在内容中摆弄他们的位置,以便在顶部创建适当的空间.

4. 用于position:absolute在其位置设置图像.

通常你会使用column-span并选择一个数字......但是在我所知道的任何浏览器中都不支持.(他们只支持all或none).

CSS

div#wrapper{
    width:500px;
    border:1px solid red;
    padding:1em;
    position:relative;
}

div#multicolumn1 {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-width:100px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    -webkit-column-width:100px;
    column-count: 3;
    column-gap: 20px;
    column-width:100px;
}

div#img{
    height:70px;
    width:350px;
    border:1px solid green;
    position:absolute;
    right:10px;
}

span.bg1{
    width:100%;
    height:100px;
    display:block;
}

示例: http ://jsfiddle.net/jasongennaro/HgmKg/2/