絕對定位，浮動子女的寬度不會超過其父母

Question

好的，所以這有點難以解釋。基本上，我有一個div定位相對，拿着一個絕對定位的div。絕對定位的div包含具有固定寬度的div，它們是浮動的。這些浮動div應該擴大絕對父項的寬度。

<div id="parent"> 
    <div id="stretchable-div"> 
    <div class="child">text</div> 
    <div class="child">another text</div> 
    <div class="child">more text</div> 
    </div> 
</div> 

問題是，當原始相對位置div寬度小於絕對div時，這不起作用。

示例 - http://jsfiddle.net/8JJSf/91/

可以在jQuery中這樣做：

$('.dropdown').each(function(index){ 
var sum = 0; 
$(this).find('.half').each(function(){ sum += $(this).outerWidth(); }); 
$(this).width(sum); 
}); 

Answer 1

你需要的，如果你想保持位置absolute

當設置位置使用JavaScript這個absolute該元素不再是常規頁面流的一部分，因此家長將不知道其子女的大小/職位。

編輯：這裏有一些jQuery代碼，根據孩子的大小來定義父級。它會拉伸父母以匹配最廣泛的孩子，以及所有孩子的身高。我不是jQuery專家，所以可能會有更好/更簡單的方法。最初應將父高度設置爲0px。

$('#stretchable-div').each(function() { 
    var parentWidth = $('#parent').width(), 
     parentHeight = $('#parent').height(), 
     childW = $(this).width() + $(this).position().left; 

    if (childW > parentWidth) { 
     $('#parent').width(childW); 
    } 

    $('#parent').height($('#parent').height() + $(this).height() + $(this).position().top); 

}); 

http://jsfiddle.net/WHV7M/