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>

应用于 wrap-boxes 的 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

Absolutely-positioned elements are no longer part of the layout. You need to use JavaScript to measure the size and position of the child elements and set the size of the parent element accordingly.

于 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 回答