绝对定位，浮动子女的宽度不会超过其父母

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/