2

あなたのためのパズルのビット....

幅730px、自動高さのdivがあります。この中に、164px X 261px の小さな div の数があります。

これらはテンプレートに動的に取り込まれるため、1 にすることも、18 にすることも、この演習のために 1000 にすることも、その中間にすることもできます。

各行でそれぞれの間隔が等しくなるように、これらの間隔を空ける必要があります。最大 4 つを扱う場合は簡単です。次のようなことができます。

var totalWidth = $('.bigDiv .smallerDivs').length * $('.bigDiv .smallerDivs').width();
var margin = ($('.bigDiv').width - totalWidth) / ($('.bigDiv .smallerDivs').length * 2);
$('.bigDiv .smallerDivs').css('margin-left': margin , 'margin-right': margin);

ただし、5つあるとします。上の行に3つ、下の行に2つ置きたいです。または、7 つある場合は、上に 4 つ、下に 3 つが必要です。11 個ある場合は、上に 4 個、中央に 4 個、下に 3 個など、小さなボックスの数に基づいて各行を適切に調整します。

誰かが私がこれについて行くかもしれない素敵なきれいな方法を提案できますか?

ここに画像の説明を入力

4

1 に答える 1

1

私の答えは基本的に、この投稿の答えにあるロジックに基づいています。

全体的な概念は、割り切れる div の数を評価し、より大きな div にクラスをアタッチして、内側の div の間隔を空けるために使用できるということです。

$(document).ready(function(){
  function nos_div_eval(val,container,inner){
    var nosDivs = $(inner).length;
     for(var i=val; i>1; i--){
      if (nosDivs % i === 0) {
        $(container).addClass('div_by_' + i);
        break;
      } else {
       $(container).addClass('prime');
      }  
     }
   }

   nos_div_eval(10, '.bigDiv', '.smallerDivs');

});​

これは、小さな div の数を評価し、2 から 10 の間の任意の数で割り切れるかどうかを確認します。一致する場合は.div_by_3、outer のようなクラスを追加し<div>ます。割り切れる 2 から 10 までの最大数に基づいてクラスを追加します。そうすれば、次のようにスタイルを設定できます。

.bigDiv.div_by_3 .smallerDivs {
   margin-right: 40px;
 }

 .bigDiv.div_by_4 .smallerDivs {
   margin-right: 20px;
  }

div を必要な行に分割するために、マージンの量を調整できます。

ただし、より小さい div の数が 2 から 10 の間の数で割り切れない場合、この関数は「素数」と呼ばれるクラスを追加します。これらの div に任意のマージン値を追加して、何が起こるかを受け入れることができます。

本当にベースをカバーしたい場合は、「i」の初期値を変更できます-1000 未満の平方を持つ最大の数である 31 に設定できます。長いです。

このフィドルはロジックを示していますが、わかりやすくするために少し単純化しています。を追加する<div>と、新しいアラート値が表示されます。

編集: わかりました、私は一人で十分に残すことができませんでした。私は戻って、3 つのパラメーターを使用して、関数を独自にまとめました。最初のパラメーターは、チェックする上位の値で、次にコンテナー要素、次に内部要素です。「#」または「.」を必ず含めてください。要素に ID またはクラスがあるかどうかに応じて、これはプレーンな古い要素でも機能します。

于 2012-06-27T14:32:35.433 に答える