Question

所以，当我点击按钮＆＃34;点击进入达尔文画廊＆＃34;面板将向下滑动并与下面的内容重叠。

当我点击按钮时，如何制作它，白色内容区域将向下移动以为画廊面板腾出空间？

我希望以下内容能够在图库面板打开时自动重新调整。

这是我的Jquery代码：

<script type="text/javascript">
    $(document).ready(function(){
        $(".fancybox").fancybox ();

        $("#darwin_button").click(function(){
          $("#darwin_panel.panels").slideToggle("slow");
        });

        $("#kakadu_button").click(function(){
          $("#kakadu_panel.panels").slideToggle("slow");
        });

        $("#alice_button").click(function(){
          $("#alice_panel.panels").slideToggle("slow");
        });
    });
</script>

Answer 1

你的身高很高，这导致了一个问题，但我无法解释所有这一切，所以这里只是修复。

.HomeBoxes {
    width: 300px;
    float: left;
    /* height: 400px; */
    margin-top: 10px;
    margin-left: 10px;
    background-repeat: no-repeat;
    padding-bottom: 20px;
}

和.Content class div：

#content {
    clear: both;
    width: 100%;
    background-color: #FFFFFF;
    /* height: 270px; */
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
}

这将解决问题，当您点击链接时，填充将在底部添加更多间距。如果你认为填充是额外的，你可以使用jquery在打开或关闭时消耗填充。

Answer 2

它与您的盒子有关，这些盒子是浮动的元素，不会在周围的容器中自动为它们创造空间。

将您的height设置更改为min-height：

#boxesWrapper { min-height: 430px; }

.HomeBoxes { min-height: 400px; }

（而不是＆＃34;身高430px＆＃34;和＆＃34;身高400px＆＃34;）

并向后续元素添加清除规则：

#content { clear: both; }

下面是JQuery SlideToggle和DIV

2 个答案: