javascript - 当不显示 div 时，忘记这个 css 规则

Question

我有 3 个 div 的情况: - 菜单 - 标题(#rt-top-surround) - 展示柜(#rt-showcase) - 主体内容(#rt-mainbody-surround)

菜单是“粘性”的，位置是固定的。因此，我必须使用填充移动在其下方呈现的 div(padding-top:120px；margin-bottom:-120px；)。

我遇到的问题是，在某些页面上，第二个 DIV 是#rt-mainbody-surround。 (比这个 div 正确呈现。) 但在其他页面上，我将#rt-showcase(显示一些宣传图片)作为第二个 DIV，然后是主体 DIV。

因此，我需要实现的是一条规则，即在显示 rt-showcase 时不在 rt-mainbody-surround div 上添加填充和边距。我不知道用 Javascript 或 PHP 来做这件事，也不知道如何完成。

我做了一个插图来说明我的意思。

希望有人能帮帮我!谢谢!

Illustration

Answer 1

如果我正确理解了这个问题，您希望在特定 div 下方留有空白仅 如果另一个 div 不可见。处理此问题的最佳方法是为顶部 div 添加底部边距，为其下方的 div 添加负边距(可以显示和隐藏)。 CSS 是:

.top {
    margin-bottom: 20px;
}

.middle {
    margin-top: -20px;
}

有时一张图片比一些代码更有值(value)，所以我创建了一个 fiddle here .享受吧!