CSS3 多列布局和图像跨度答案

【问题标题】：CSS3 multi-column layout and Image spanCSS3 多列布局和图像跨度
【发布时间】：2011-04-01 05:14:15
【问题描述】：

我们能否在 HTML 页面中使用 CSS3 多列属性创建跨越多个列的图像。这是我的列布局样式

div#column {
        margin-left:20px;
        -moz-column-width: 250px;
        -moz-column-gap: 20px;
        -webkit-column-width: 250px;
        -webkit-column-gap: 20px;
        height: 850px;
      }

我需要在此列布局中放置一个图像，该布局至少跨越 2 或 3 列。

【问题讨论】：

标签： javascript html css

【解决方案1】：

理论上有column-span，但目前似乎没有任何浏览器支持它。

您可以按照 Simon 的建议尝试使用 position:absolute，但我怀疑您能否获得满意的结果，而且我认为没有其他合理的解决方法。

也许有 JavaScript 库可以做到这一点......

【讨论】：

【解决方案2】：

在您的 div 上添加宽度并添加此样式

column-count:3;
-moz-column-count:3;
-webkit-column-count:3;

见参考：>>

【讨论】：

【解决方案3】：

我要求 @Krishna 发布这个问题，因为我们的其他 SO 问题/回答会话 Increase font size with JavaScript around fixed floated images in CSS columns 离题了，即它已解决，并且这张跨越多个列的图像保证了一个新问题。

所以，到目前为止我的想法......

column-span 正在为我使用 Webkit (Chrome12)。查看quirksmode demo page。然而，坏消息是它无助于解决这个问题，因为需要跨越多个列的图像仍然会在column-width 处被剪裁，所以我认为这不是解决方案。

目前我认为唯一的解决方案是自己在 JavaScript 中编写列，或者尝试使用/修改 jQuery columnizer plugin。

哦，我刚刚发现了另一个问题CSS3 Columns and Images，它基本上同意没有 JavaScript 是不可能的。

已经有很多 JavaScript 用于您的字体增加/减少（不同的问题，请参阅 my fiddle），所以如果 CSS 本身支持它会很棒。我们想要的是大Yoda 溢出到第二列:-)

所以我认为目前唯一的解决方案是：

对于每张大于一列宽度的图片，计算出下一列的宽度（包括column-gap）
在图像需要重叠的下一个位置添加浮动<div>，以便文字正确地继续在图像周围和下方流动
绝对将图像的副本放在顶部。

我只是希望您不想要跨越超过 2 列的图像，否则会使已经很复杂的解决方案变得复杂！

【讨论】：

【解决方案4】：

使用位置：绝对，像这样：

#image {
    position:absolute;
    top:300px; //distance from top
    left:200px; //distance from left
    width:600px; //image width
    height:400px; //image height
}

【讨论】：

通过为图像提供绝对位置，文本向下移动到图像。
@Krishna，你到底是什么意思？文字在图片下方？在这种情况下，将文本放入 DIV 并对其应用此样式：margin-top:image-height-in-pixels;
@Simon..你提到了正确的问题，文字在图片下方。通过将 margin-top 样式赋予 div 作品，但它适用于所有列。请看一下我给文本 div 的样式。说。如果给了 3 列文本并且我的图像跨越了两列。然后通过在该 div 上应用一个边距顶部会导致第三列下降，因此会有一个空白区域。无论如何我们可以删除它。