4

我正在尝试使用 CSS3 控制分栏符并遇到一些布局问题。

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

我的 less 代码创建了一个名为“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;
    }
}

但是，分栏符似乎不起作用。

4

1 回答 1

3

如caniuse.com 所述：

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

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

金融时报实验室发布了columnflow，一个非常高级的脚本（可能对你来说太高级了？）：

  • 可配置的列宽、间距和边距
  • 固定位置元素
  • 跨列的元素
  • Keep-with-next 类以避免列底部的标题
  • 无包装类以避免跨列破坏标记的元素
  • 将列分组到页面中
  • 将文本基线与网格对齐的标准化行高
  • 快速重排字体大小更改

或者也许columnizer可以帮助你

于 2013-03-21T20:28:03.820 回答