php - CSS 列，如报纸和带有媒体的 div

Question

我正在尝试找到一种解决方案，以便能够通过 css、js 或 php 对附加图像等内容进行编码。

我想为我的文章设置三栏。在最后 2 列的顶部，一个额外的 div 用于文章的媒体。

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

提前致谢...

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

---

这个解决方案的分栏部分没问题，在这种情况下我不关心跨浏览器，但这里的问题是我如何配置媒体 div 的位置，在最后 2 列的顶部，并防止正文重叠!

Answer 1

如果您使用的是现代浏览器，您可以使用 css3 中的 column 位

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. 设置你的多列div，给它一个固定的宽度

3. 添加两个间隔符 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/