Question

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

CSS（适用于Chrome甚至IE / Edge，但在FireFox中失败）：

这里期望的结果是3列布局（我得到），其中Item1，Item3和Item11是3列中的顶部元素。

在Chrome中，它看起来很膨胀： Chrome Output

在FireFox中，我在Item1，Item3＆amp;上获得粗体文字。第11项 FireFox Output

JS Fiddle

提前感谢您的任何帮助。

Answer 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

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

FireFox

1 个答案: