相对定位扩展div的内容，而不是压倒兄弟姐妹

Question

抱歉，这个标题让人摸不着头绪!

我有一个可扩展div列表，当点击时，显示一个子div，里面有内容。然而，我遇到的问题是，尽管父div和子div都处于相对位置，但在列表中扩展一个div并不会将列表中下面的div的其余部分向下推。扩展后的内容只会出现在其他可扩展内容的后面。

这里有一个简单的例子:http://jsfiddle.net/LT8h2/1/

<div id="cont1">This is an expanding div, click me!
    <div id="middle1">
        This is the content that should appear!
        <div>Inner 1</div>
        <div>Inner 2</div>
    </div>
</div>
<div id="cont2"></div>

在本例中，id为"cont1"one_answers"cont2"的div是列表中的可扩展项。为简单起见，我只将内容赋给"cont1"。"

"middle1"代表"扩展"面板，一个div将占用空间来容纳内容。然后带有文本"inner 1"one_answers"inner 2"的div将显示在展开的面板中。

CSS是:

#cont1, #cont2 {
    position: relative;
    width: 746px;
    height: 50px;
    margin-bottom: 5px;
    text-align: left;
    background-color: #f2f2f2;
}
#middle1 {
    display: none;
    position: relative;
    height:45px;
    border: 1px solid red;
    width: 724px;
    padding: 17px;
    top:50px;
}

最后是jQuery在点击

时展开项目

$("#cont1").on("click",function() {
    var showing = ($("#middle1").css("display") == "block");
    if (showing) {
        $("#middle1").css("display","none");   
    }
    else {
        $("#middle1").css("display","block");   
    }
})

Answer 1

设置height为min-height, height为#cont1， #cont2。这会让Div下推它的好友。如果你把#middle1中的top:50px改成margin-top:50px，显示效果会很好，而不是从框中流出来。

另外，你可以将。css()切换为slideUp()和slideDown()，以获得很好的效果。如果你是刚接触jQuery的，就把它放在这里。

Answer 2

你正在定义一个固定的高度和top:50px更改你的CSS: FIDDLE

#cont1, #cont2 {
position: relative;
width: 746px;
min-height: 50px;
margin-bottom: 5px;
text-align: left;
background-color: #f2f2f2;
}
#middle1 {
display: none;
position: relative;
height:45px;
border: 1px solid red;
width: 724px;
padding: 17px;   
}