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/

浮动儿童的绝对定位宽度不会超过其父母

1 个答案: