3

可変数の LI 要素を含む 1 つの UL リストを作成したいと考えています。コンテナの高さを最大500pxにしたいです。つまり、その 500px の高さを超える li 要素がさらにある場合、2 列に変えたいということです。それ以上ある場合は、2 列に収まる場合は、3 列に変更したいと考えています。最大 5 列を修正するのに十分なスペースがあり、データがその量を超えることはありません。

どうすればこれを行うことができますか？jquery、cssのトリックはありますか? または、これを行うには、各シナリオのサーバー側を処理する必要がありますか?

Example 1

    list entry    list entry 
    list entry    list entry
    list entry    list entry
    list entry    list entry
    list entry    


 Example 2
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry
    list entry    list entry


 Example 3
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry

1 つの UL なしでは達成できない場合、私はそれを受け入れます。

ありがとう！

4

2 に答える 2

3

http://jsfiddle.net/eaewX/1/

<div>各リストを a 、 setting columns、column-width、またはcolumn-countonにカプセル化する<div>と、リストが適切に列に分割されます。

編集: jsfiddle にありますが、現在、これらのプロパティにはブラウザー拡張機能を使用する必要があることを明確にする必要があり-webkit-ます-moz-。-o-

参考のため：

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts

http://dev.w3.org/csswg/css3-multicol/#columns

于 2012-10-30T15:42:51.513 に答える
0

これが実用的なソリューションです

/* set max height of containers */
var maxHt=500;/* may need to adjust based on css*/

var $list=$('#startList')
var $container=$list.parent();

var $li=$list.find('li');

var totHt=0;    
var totItems=$li.length;
$li.each(function( idx){

    var ht=$(this).height();
    if( totHt + ht >= maxHt || idx==totItems-1){
        $('<ul>').append( $(this).prevAll().andSelf() ).appendTo( $container );
        totHt=0;
    }else{
        totHt += ht;
    }  

});

$list.remove()

デモ：http：//jsfiddle.net/rzw64/3/

ULに設定された高さは、計算に使用される最大の高さよりも少し余分に必要であることに注意してください。maxHt追加のCSSは、許可されるように設定する親コンテナーの動的な高さを取得するためのコードを追加するのに役立ちます。

于 2012-10-30T15:09:31.903 に答える