決められた幅の中に動的に数が変化するli要素などがある場合、その数に応じて均等割り付けするスクリプトです。

サンプル(1)は、横方向のmargin、paddingを使わず、borderもないので、均等割り付けする要素の数で100%を割って、幅を%で算出しています。

サンプル(2)は、横方向の右marginで1px、1pxのborderが左右で2px、計3px余計に幅を取るため、均等割り付けする要素の数で94%を割って、幅を%で算出しています。そのため、均等割り付け可能なli要素の数は15個までになります。

サンプル(1)ソース

$(function() {
    $('.divide').each(function(){
     var wid = $(this).find('li').length;
     $(this).children('.divide>li').css("width",100/wid+"%");   
    });
});

サンプル(1)

 

サンプル(2)ソース

$(function() {
    $('.divide2').each(function(){
     var wid2 = $(this).find('li').length;
     $(this).children('.divide2>li').css("width",94/wid2+"%");   
    });
});

サンプル(2)

 

 

 

 

 

 

※参照元:http://jsdo.it/toshino/9t5v
戻るボタン