フロートされたDIVを2行に分割すると、行がドロップダウンする場合があります。

Question

私はラッパーDIVを持っており、たとえばDIVは600px幅です。

このdivの中で、一連のコンテンツDIVを左に浮かしました。これらは200ピクセルまたは400ピクセルのいずれかの幅で、すべて同じ高さです。私は400ピクセル1に続いて、2つの200pxのものを持っていた場合

三200pxの幅のdiv要素は明らかに、なども200pxの1に続く400ピクセル単一のもの、

を完全に一対一のラインを合わせます、後者は希望下の行にドロップダウンし、上の行の末尾に200ピクセル幅のスペースを残します。

ここで、これらのDIVの内容がテキストであると仮定すると、DIVが検出される方法は、幅+現在の行の残りのスペースがないために次の行にドロップされます。この400px divを2つの200px divに分割し、最初の部分を1行目の最後の200px幅のDIV、残りの部分を2行目の最初の200px DIVに残します。

jqueryがサイトで使用されるため、jqueryを使用するソリューションが見つかった場合は、作業が簡単になります。私はcolumnizeプラグインで試してみましたが、これを行う方法が見つかりませんでした。私はかなりJSの初心者です。

助けてください/ポインタがありがとうございます。

Answer 1

が、多分それはあなたのsollutionを見つけるためにあなたを助けます：

var pos = 0; 
$('.container div').each(
    function() 
    { 
     pos += $(this).width(); 
     if(pos > 600) 
     { 
      var div1 = $(this).children(".subdiv1"); 
      var div2 = $(this).children(".subdiv2"); 
      $(this).after(div1); 
      $(this).after(div2); 
      $(this).remove();   
     } 
     if(pos >= 600) 
      pos = 0; 
    } 
); 

Answer 2

jQueryを使用すると、divのCSSの計算された高さを見つけることができます。また、1行に収まると予想されるよりも大きければ、ドロップされたことを意味します。

少し不器用

if ($("#id").height > default) // default will be an integer 
{ 
    ... steps to make it two divs instead 
}