Firefox中的CSS分栏符[重复]答案

【问题标题】：CSS column break in Firefox [duplicate]Firefox中的CSS分栏符[重复]
【发布时间】：2016-07-02 19:52:24
【问题描述】：

我正在尝试找出一种跨浏览器方法来实现无序列表的列式布局。标记来自 CMS，因此我无法在添加类之外修改输出。我可以让列工作，但我还需要指定分栏符，因为列并不总是相等的。标记看起来像：

ul {
  list-style: none;
}
.c3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
.colBreak {
  -moz-column-break-before: always;
  -webkit-column-break-before: always;
  column-break-before: always;
  font-weight: bold;
}

<ul class='c3'>
  <li class='colBreak'>Item1</li>
  <li>Item2</li>
  <li class='colBreak'>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
  <li>Item9</li>
  <li>Item10</li>
  <li class='colBreak'>Item11</li>
  <li>Item12</li>
  <li>Item13</li>
  <li>Item14</li>
</ul>

CSS（在 Chrome 甚至在 IE/Edge 中运行良好，但在 Firefox 中失败）：

这里想要的结果是 3 列布局（我确实得到了），其中 Item1、Item3 和 Item11 是 3 列中的顶部元素。

在 Chrome 中，它看起来膨胀：

在 Firefox 中，我在 Item1、Item3 和 Item11 上看到粗体字

JS Fiddle

【问题讨论】：

见：caniuse.com/#search=column
@GCyrillus，确实指出了问题，但我仍然没有可行的替代方案。
目前没有 Firefox。您将需要一些棘手的 Javascript 来插入空容器以填充列底部，然后再将您希望看到的元素置于下一列的顶部，将其分解为多个 ul 或不... :(
一种使用 margin-bottom 代替增长一些元素的 flex 替代方案，无论哪种方式，高度都应该是固定的 codepen.io/anon/pen/JXEyqE 和列数/填充版本 codepen.io/anon/pen/MyJEgY 不知道如何通过 js 解决这个问题，手动很容易

标签： html css firefox css-multicolumn-layout

【解决方案1】：

我能够让它与输出、附加类和一些 jQuery 一起工作。我没有指出 colBreaks 的位置，而是为每个导航项分配了一个列类

<ul class='c3'>
  <li class='col1'>Item1</li>
  <li class='col1'>Item2</li>
  <li class='col2'>Item3</li>
  <li class='col2'>Item4</li>
  <li class='col2'>Item5</li>
  <li class='col2'>Item6</li>
  <li class='col2'>Item7</li>
  <li class='col2'>Item8</li>
  <li class='col2'>Item9</li>
  <li class='col2'>Item10</li>
  <li class='col3'>Item11</li>
  <li class='col3'>Item12</li>
  <li class='col3'>Item13</li>
  <li class='col3'>Item14</li>
</ul>

然后，使用 jQuery wrapAll 方法，我能够添加引导类以将其分解为列：

$(".c3 .col1").wrapAll("<div class='col-sm-4' />");
$(".c3 .col2").wrapAll("<div class='col-sm-4' />");
$(".c3 .col3").wrapAll("<div class='col-sm-4' />");

这将所有 .col1 项目分组到一个 <div> 中，并且在不使用间隔符的情况下得到了休息。

Working (in FireFox) JS Fiddle

如果有人有更好的方法来实现这一点，我很乐意看到它。但是，这适用于这个特定问题。

【讨论】：