Question

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

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

谢谢：）

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

Working Fiddle

只需将display: inline-block添加到父

即可

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

来自CSS: Parent-Div does not grow with it's children (horizontal)

Answer 3

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

像这样，

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

DEMO

如何在显示固定宽度的子div出现时展开父div？

3 个答案: