0

アイテムの数が不明なリストがあります。リストが列に分割されるようにjqueryまたはjavascriptを使用する方法はありますか? トリッキーな部分: 列の数も動的であるため、ブラウザーが変更されると、列の数が変更されます。フロートと比較できます。したがって、ブラウザを小さくすると、フローティング div が下部にフロートします。(幅を設定していない場合) アイテムの数を数えて列に配置し、ul リストをフロートすることができます。しかし、最後の列が最初の列の下に配置されるという問題があります。しかし、最初の列の下に「2番目」の列が必要です。

例えば：

<ul>
   <li>test1</li>
   <li>test2</li>
   <li>test2</li>
   <li>test4</li>
   <li>test5</li>
   <li>test6</li>
</ul>

フロートを行うと、次のようになります。

テスト1 テスト2 テスト3 テスト4 テスト5 テスト6

ブラウザが小さくなると、次のようになります: test1 test2 test3 test4 test5 test6

test1 test3
test4 test5 test6 test2

（これはフロートを使用する場合です）フロート順序を変更する方法、またはjqueryを使用して列を動的に作成する方法はありますか？

私はこの解決策を見つけましたが、それでも私が望むようには機能しません。それは jquery プラグインです: columnizeList. リストはいくつかの列に表示されますが、まだこの問題があります: ページをロードすると、たとえば div に次のリストがあります:

ここに画像の説明を入力

（だから以前と同じ問題です）。私はまだフロートを使用していたので、それが問題なのかもしれません。しかし、フロートなしでこれを解決できますか?

4

2 に答える 2

0

that's how floating works, if you want items to be shown below each other, you can wrap some of them and then float their wrapper:

<ul>
   <div>
     <li>test1</li>
     <li>test2</li>
     <li>test2</li>
     <li>test4</li>
     <li>test5</li>
   </div>
   <div>
     <li>test6</li>         
     <li>test7</li>         
     <li>test8</li>
   </div>
</ul>


ul div {
   float: left
}

http://jsfiddle.net/f8Kgj/

于 2012-06-18T09:43:47.387 に答える