1

我正在尝试找出一种跨浏览器方法来实现无序列表的列式布局。标记来自 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小提琴

4

1 回答 1

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>并在不使用垫片的情况下获得休息。

工作（在 FireFox 中）JS Fiddle

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

于 2016-03-17T22:29:03.787 回答