3

動的な数の子要素をラップするように div を取得しようとしていますが、親の幅の値を設定せずにこれを実行したいと考えています。

子要素と親要素の両方をフローティングすることでコンテンツの折り返しを取得しました。私の問題は、子要素が次の行に折り返されると、右側に空きスペースが残っているため、親を「しっかり」折り返すことです。

ここでデモをセットアップしました: http://jsfiddle.net/UMgct/4/

#parent は現在の動作を示しています。#parent2 や #parent3 のように動作させたいのですが、明示的に幅を設定する必要はありません。#parent の動作が正しい理由はわかりますが、希望する動作を取得する方法がわかりません。

どんなアイデアでも大歓迎です

4

1 に答える 1

1

まず、'parent' と 'child' を ID ではなくクラスに変更する必要があります。ID は一意の識別子であることを意図していますが、クラスは何度でも使用できます。

そうは言っても、JQuery で目的を達成できます (ID がクラスに変更されたと仮定します)。

$(document).ready(function() {
    var numPerLine = parseInt($(window).width() / $('.parent > .child').outerWidth(true));
    $('.parent').width($('.parent > .child').outerWidth(true) * numPerLine);
});
于 2012-04-03T22:29:37.137 に答える