css - 绝对定位，浮动子元素的宽度，不会超过它自己的父元素

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

如果你想保持这个位置，你需要为此使用 JavaScriptabsolute

当设置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/