Question

我正在尝试使用CSS3控制列分隔符并且在布局方面存在一些问题。

我使用较少的预处理器来编译CSS。

我的代码越少，创建一个名为“details”的类，它应用于div。

.details {
    .column-count;
    .column-gap(50px);
    .column-rule(1px dotted @bodybackground);
    h3 {
        -webkit-column-span: all;
        -moz-column-span: all;
        column-span: all;
        padding-bottom: 25px;
    }
    h4 {
        &.breakbefore {
            -webkit-break-before: always;
            -moz-break-before: always;
            break-before: always;
        }
        &.breakafter {
            -webkit-break-after: always;
            -moz-break-after: always;
            break-after: always;
        }
    }
    ol li, ul li, table {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    }
}

但是，列分隔似乎不起作用。

Answer 1

正如caniuse.com所述：

部分支持是指不支持break-before，break-after，break-inside属性。 Webkit浏览器确实具有对非标准-webkit-column-break- *属性的等效支持。

IE10和Opera 12（只是希望他们在WebKit切换到他们的新渲染引擎时能够提供他们的代码......）可能有更好的支持（我没有测试它）。

金融时报实验室发布了 columnflow ，一个非常高级的脚本（可能太高级了，无法使用？）：

可配置的列宽，装订线和边距
固定位置元素
跨栏的元素
保持下一堂课以避免列底部的标题
无包装类以避免跨列打破标记的元素
将列分组为页面
将文本基线与网格对齐的标准化线高
字体大小更改快速重排

或者 columnizer 可以帮助您

控制CSS3列分隔符

1 个答案: