相对定位扩展 div 的内容不压低兄弟姐妹答案

【问题标题】：Relatively Positioned expanding div's content not pushing down siblings相对定位扩展 div 的内容不压低兄弟姐妹
【发布时间】：2014-09-13 19:35:15
【问题描述】：

抱歉标题混乱！

我有一个可展开的 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”和“cont2”的 div 是列表中的展开式。为简单起见，我只给了“cont1”的内容。

"middle1" 代表“扩展”面板，一个会占用空间来容纳内容的 div。那么带有文本“inner 1”和“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");   
    }
})

【问题讨论】：

标签： jquery html css layout expandable

【解决方案1】：

在“#cont1,#cont2”中将您的高度设置为最小高度。这会让 Div 推倒它的伙伴。如果您将 #middle1 中的 top:50px 更改为 margin-top:50px ，则显示将很好地适应而不是从盒子中流出。

此外，您可以将 .css() 切换为 slideUp() 和 slideDown() 以获得良好的效果。如果您是 jQuery 的新手，请把它扔在那里。

【讨论】：

效果很好！我以为我尝试过使用 min-height 并没有用，但我一定忘记了冒号或类似的愚蠢东西。不过，上滑/下滑非常棒，这正是我希望做的！

【解决方案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;   
}

【讨论】：