浮動要素の周りに親divをラップする

Question

divの動的要素を囲むようにしようとしています。親の幅の値を設定せずにこれを実行したいと思います。

子要素と親要素の両方を浮動して内容をラップしていますが、私の問題は、子要素が次の行に折り返すときに右側に余白が残っていて、親を折り返したいと思います"しっかり"。

私はここにデモを設定しました：http://jsfiddle.net/UMgct/4/

#parentは、現在の挙動を示し、私はそれが＃のparent2と＃のparent3のように動作しますが、明示的に幅を設定せずにしたいと思います。私は#parentの動作が正しい理由を知ることができますが、私が望む振る舞いを得る方法は見当たりません。

任意のアイデアが大幅に

Answer 1

まずオフいただければ幸い、あなたの代わりにIDのクラスであることを「親」と「子」を変更する必要があります。 IDは一意の識別子になりますが、クラスは必要な回数だけ使用できます。

ということで、あなたはjQueryを使って欲しいものを達成することができます（IDが今のクラスに変更されていると仮定した場合）：

$(document).ready(function() { 
    var numPerLine = parseInt($(window).width()/$('.parent > .child').outerWidth(true)); 
    $('.parent').width($('.parent > .child').outerWidth(true) * numPerLine); 
});