jquery - 当子div以固定宽度出现在节目中时，如何扩展父div？

Question

当子 div（固定宽度）显示 onclick 时，如何扩展父 div（自动）？

目标： 当我点击链接时，子 div 会出现，父 div 应该扩展（缩放）到子 div 的宽度。子 div 不应溢出到父 div 之外。

谢谢 ：）

http://jsfiddle.net/aebLS/3/

JS：

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

HTML：

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

CSS：

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

Answer 1

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

Answer 2

工作小提琴

只需要添加display: inline-block到父级

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

来自CSS：Parent-Div 不会与它的子级一起增长（水平）

Answer 3

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

像这样，

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

演示