Question

只要在容器上设置column-span: all或overflow: hidden，CSS属性float: left|right似乎就会停止工作：

<div>
    <h2>Spanning Header</h2>
    <p>Lorem ipsum dolor …</p>
</div>

和

div {
    column-count: 2;
    column-gap: 2em;
    float: left; /* or */
    overflow: hidden;
}
h2 {
    /* will not work */
    -webkit-column-span: all;
}

以下是初始（工作）版本：http://jsfiddle.net/8y67gqya/
这两点都不起作用：http://jsfiddle.net/rL3m59gk/也不是：http://jsfiddle.net/rL3m59gk/1/

这是否有合理的理由或解释？
或者我错过了什么？

修改：此错误出现在Google-Chrome 而非 Safari ...（现在无法测试IE）

Answer 1

以下是让column-span在Google Chrome中运行的一种方式。

将整个div包装在块级容器div.wrap中，并将float或overflow属性应用于它。

将column属性应用于子.panel块。

<div class="wrap">
    <div class="panel">
         <h2>Spanning Header</h2>
        <p>Lorem ipsum dolor s...</p>
    </div>
</div>

和CSS：

div.wrap {
    float: left;
    width: 600px;
    overflow: auto;
    border: 1px dotted blue;
}
div.panel {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 2em;
    column-gap: 2em;
}
h2 {
    -webkit-column-span: all;
    border: 1px dotted blue;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/aq6gpmf4/

我认为原始示例中发生的情况是，当您应用float: left或overflow: {hidden|auto}时，您正在建立新的块格式化上下文，这似乎阻止了{{ 1}}从正常工作。

我不确定为什么会这样，但最好的线索来自Mozilla文档页面：

https://developer.mozilla.org/en-US/docs/Web/CSS/column-span#Values

column-span值为column-span: all建立新的块格式化上下文。所以我的猜测是由h2引起的div上的块格式化触发因float: left上的column-span: all而导致的块格式化触发因素干扰，所以算法只是忽略h2触发器。

CSS3规范没有解决这种行为的确切细节，所以我希望实现由浏览器决定（即设计和编写相关代码的人）。

注意：我没有在Safari中查看此内容，但我希望它可以正常运行。

column-span：所有与overflow和float的冲突

1 个答案: