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

如果我有一个

div#child

位于

左侧：5000px

，并且我的窗口比这个窗口窄，我的

div#parent

是否可能足够宽以容纳它的子级

---

宽度：100%仅与不包含子对象的主体一样宽。我不知道孩子的宽度/位置。我不想使用JavaScript（但如果必须，如何使用？）

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

---

parentWidth=childWith+childLeft

我认为您应该使用JavaScript/jQuery实现您的目标。以下是jQuery中的一个示例解决方案：

CSS

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

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

JS

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

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

致以最良好的祝愿