Jquery 当子div以固定宽度显示在节目中时，如何展开父div？

当单击显示子div（固定宽度）时，如何展开父div（自动）

目标： 单击链接时，将显示子div，父div应扩展（缩放）到子div的宽度。子div不应溢出父div之外

谢谢：）

JS:

$(function() {
    $('#mylink').click(function() {
        $('#mybox').show();
    });
});

<a id="mylink" href="javascript:void(0);">SHOW BOX</a><hr />
<div class="parent">
    <div class="header">Header Content</div>
    <div id="mybox" class="child">Content</div>
</div>

body { 
    font-family:verdana; 
    font-size:10px;
}
.parent {
    border:1px solid blue;
}
.child {
    display:none;
    width:400px;
    border:1px solid red;
    background:lightblue;
}
.header {
    width:auto;
    border:1px solid green;
}

HTML:

$(function() {
    $('#mylink').click(function() {
        $('#mybox').show();
    });
});

<a id="mylink" href="javascript:void(0);">SHOW BOX</a><hr />
<div class="parent">
    <div class="header">Header Content</div>
    <div id="mybox" class="child">Content</div>
</div>

body { 
    font-family:verdana; 
    font-size:10px;
}
.parent {
    border:1px solid blue;
}
.child {
    display:none;
    width:400px;
    border:1px solid red;
    background:lightblue;
}
.header {
    width:auto;
    border:1px solid green;
}

---

更改您的div位置并显示结果

像这样,

<div class="parent">
    <div class="header">Header Content
        <div id="mybox" class="child">Content</div></div>
</div>

标题内容
所容纳之物

只需将

display:inline块

添加到父级

.parent {
    border:1px solid blue;
    display: inline-block;
}

---

从

您想将其扩展到多大？在你的例子中，它已经比孩子宽了，是否要将子级的宽度添加到已经很宽的父级？@DGS:我想将其扩展到子级div的宽度，这样它将缩放其宽度，而不会溢出到父级div之外。最好添加一个图像，显示您遇到的实际问题。无法满足问题的要求。他需要扩展父级div和chid在parentdiv中显示div，这将正确调整JSFIDLE输出窗口的大小，使父窗口的宽度小于400px，并且您将看到它仍然存在overflows@DGS我正在对旧代码进行一些更改，并更新，而不是创建新的css、js和html，因为您会看到父级的大小很大。现在选中此链接并显示新的输出。。这个问题试图解决的问题是有一个自动宽度的父对象和一个固定宽度的子对象。您为父级添加了一个固定宽度，这不是问题所要求的。