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 では失敗します):

ここでの望ましい結果は、Item1、Item3、および Item11 が 3 列の一番上の要素である 3 列のレイアウトです (私は取得します)。

Chrome では、次のように表示されます。 クロム出力

Firefox では、Item1、Item3、および Item11 に太字のテキストが表示されます Firefox 出力

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 に答える