0

私が持っているとしましょう

CSS：

.mainWrap { position: relative; overflow: hidden; }
.wrap-boxes { positon: relative; }
.box { position:absolute (position and height is generated by plugin isotope: http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html }

HTML：

 <div class"mainWrap">
    <div class="wrap-boxes">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>

ラップボックスに適用されたclearfixは、絶対位置の要素が含まれているため機能しません。

したがって、ラップボックスを拡張するには、jQueryを使用してボックスの高さを計算する必要があります。これらのボックスはランダムな高さであるため、高さはわかりません。また、クライアントによって常に生成されるため、ボックスの総数もわかりません。それを解決する一般的なjQueryが必要です。mainWrapを延長しないと、ボックスが切断され、オーバーフローを使用する必要があります。他の理由で非表示になります。

これについて何か助けはありますか？

4

3 に答える 3

2

多分このような何か？

$.fn.wrapHeight = function() {
    return this.each(function() {
        var height = 0;
        $(this).children().each(function() {
            height += $(this).height();
        }).end().height(height);
    });
};

$('.wrap-boxes').wrapHeight();
于 2012-02-06T17:33:15.673 に答える
1

絶対配置された要素は、レイアウトの一部ではなくなりました。JavaScriptを使用して、子要素のサイズと位置を測定し、それに応じて親要素のサイズを設定する必要があります。

于 2012-02-06T17:28:18.440 に答える
1

純粋JavaScriptに、次を使用できます。

var wrapbox = document.getElementById('mainWrap').childNodes[1],
    els = wrapbox.childNodes,
    i,
    height = 0;

for (i in els) {
    if(els[i].nodeType == 1) {
        height += parseInt(els[i].offsetHeight);
    }

    wrapbox.style.height = height + 'px';
}

http://jsfiddle.net/AJLe7/1/

答えを単純化するためにに変更したことに注意class="mainWrap"してください...id="mainWrap"

于 2012-02-06T17:39:02.513 に答える