如何擴展容器時，它有絕對定位的元素？

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，盒子將被切斷，我需要使用overflow：由於其他原因隱藏。

對此有何幫助？

來源

2012-02-06 rob.m

我沒有看到在你的HTML包裝盒，有包裝盒，不知道這是你的意思。而且，上面的代碼有點不正確，因爲它將所有的盒子放在一起。另外，我認爲你不需要jQuery，可以用CSS來完成。 – bzx 2012-02-06 17:35:47

對不起，我更新上面的代碼 – 2012-02-06 17:38:20

也許這樣的事情？

$.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-06 17:33:15 David

謝謝。如果我在周圍應用邊框.wrap-boxes我只能看到1px頂部，它告訴我它的高度沒有改變，使用那個 – 2012-02-06 17:37:26

對不起，我忘了在遞增之前添加一個零作爲默認值。再試一次。 – David 2012-02-06 17:38:22

supadupa :)謝謝！ – 2012-02-06 17:47:23

絕對定位的元素不再是佈局的一部分。您需要使用JavaScript來測量子元素的大小和位置，並相應地設置父元素的大小。

來源

2012-02-06 17:28:18

是的..如何tho？ :) – 2012-02-06 17:34:05

在純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-06 17:39:02 xandercoded

感謝人，試圖讓我的頭在此刻jQuery，純js是我的當前技能有點太多，我必須承認:) – 2012-02-06 17:52:45

@ rob.m np，請始終記住，jQuery是JavaScript :) – xandercoded 2012-02-06 17:54:10

如何擴展容器時，它有絕對定位的元素？

回答

相關問題