绝对定位，浮动子级的宽度，不会超过其自己的父级 [英] Absolute positioned, width by floated children, won't exceed its own parent

问题描述

好的，所以这有点难以解释.基本上，我有一个相对定位的 div，持有一个绝对定位的 div.绝对定位的 div 包含固定宽度的 div，它们是浮动的.这些浮动的 div 应该扩展绝对父级的宽度.

<div id="stretchable-div"><div class="child">text</div><div class="child">另一个文本</div><div class="child">更多文字</div>

问题是，当原始相对位置 div 宽度小于绝对 div 时，这不起作用.

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

可以通过以下方式在 jQuery 中完成:

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

解决方案

如果你想保持位置为absolute

，你需要使用JavaScript

当将位置设置为 absolute 时，元素不再是常规页面流的一部分，因此父元素将不知道其子元素的大小/位置.

这里是一些 jQuery 代码，它根据子项调整父项的大小.它将拉伸父级以匹配最宽的子级以及所有子级的高度.我不是 jQuery 专家，所以可能有更好/更简单的方法.父高度最初应设置为 0px.

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

http://jsfiddle.net/WHV7M/

Okay, so this is a bit difficult to explain. Basically, I have a div positioned relative, holding a an absolutely positioned div. The absolutely positioned div contains divs with a fixed width, which are floated. These floated divs should expand the width of the absolute parent.

<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>

Problem being, this does not work when the original relative position div width is less than the absolute div.

Example - http://jsfiddle.net/8JJSf/91/

Can be done in jQuery by:

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

解决方案

You need to use JavaScript for this if you want to keep the position as absolute

When setting the position to absolute the element is no longer part of the regular page flow, and so the parent will have no knowledge of its children's sizes/positions.

edit: here's some jQuery code that sizes the parent based on the children. It will stretch the parent to match the widest child, and the height of all children. I'm no jQuery expert, so there might be a better/easier way. The parent height should be set to 0px initially.

$('#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/

这篇关于绝对定位，浮动子级的宽度，不会超过其自己的父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！