Question

如果我的div#child位于left: 5000px，而我的窗口比那更窄，我的div#parent是否可以足够宽以容纳其孩子？

width: 100%仅与身体一样宽，不包含孩子。我不知道孩子的宽度/位置。我不想使用JavaScript（但是如果必须的话，怎么样？）。

Answer 1

绝对定位的元素不再是布局的一部分。父母不知道孩子有多大。是的，您需要使用JavaScript根据子项的大小和位置调整父项的宽度。

parentWidth = childWith + childLeft

Answer 2

我认为您应该使用JavaScript / jQuery来实现目标。以下是jQuery中的示例解决方案：http://jsfiddle.net/hU2TV/

<强> CSS

#parent {
    width: 100%;
    background-color: red;
    height: 100px;
}
#child {
    position: absolute;
    left: 700px;
    background-color:blue;
    width: 50px;
    height: 50px;
}

<强> JS

(function ($) {
    var child = $('#child'), parent = $('#parent');
    if (child.offset().left + child.width() > parent.width()) {
        parent.width(child.offset().left + child.width());
    }
}($));

<强> HTML

<div id="parent"><div id="child"></div></div>

祝你好运！

使元素足够宽以包含绝对定位的元素

2 个答案: