LI 縦配置問題_html/css_WEB-ITnose

  

    

    

    

    

    

  

如何让纵向排满一列自动换第二列，大虾们请执教。。。

回复讨论(解决方案)

  
• ??1 Itemone 

  
• ??2 Itemtw

  
• ??3 Itemthree 

  
• ??4 Itemfour 


• ??05 Itemfiv 


• ??06 Itemsixx


• ??7 Item777 


• ??8 Item8888 


• ??9 Item99


• ??10 Itemtttenn


• ??11 Item111e 


• ??12 Item1122 


• ??13 Item13131 


• ??14 Item1414 


• ??15 Item1555 


• ??16 Item16 


• ??17 Item17777 


• ??18 Item18 


• ??19 Item1999 


• ??20 Item122 


• ??21

行がいっぱいになったら次の行に移動する

複数の DIV を使用することをお勧めします。高さは固定、キューがいっぱいの場合は 2 番目にランク付けされます

この配置は FIREFOX では互換性がありません

これにより、水平になります。



li にフローティング配置を追加します。li の長さが ul の長さ以下になるように計算する必要があります。これらをきれいに配置したい場合は、li にオーバーフローの非表示と高さを追加するのが最善です。

実装には問題ありませんが、jquery を使用すると、右側がいっぱいで、左側が 10 になるのは奇妙に感じませんか?次に、右側、つまり全体の高さが固定され、左側の最大行数が達成されます (10 と仮定します)。まず、これらの li は、position:absolute; を使用して配置され、次に jquery を使用して配置されます。最初の 10 個のナビゲーション i(i=0;i