jquery - Jquery 选项卡式导航导致以下元素出现浮动问题

Question

我一直非常头疼，试图弄清楚为什么 facebook 评论框在选项卡式导航的选项卡下方浮动得如此之高。我已经尝试了浮动元素的 clearfix 的多种变体但无济于事，我发现如果你删除 jquery 元素它工作正常......但我无法确定答案

这是一个工作链接

提前谢谢了

score 0 · Accepted Answer

我会尝试添加clear:all到#tabsdiv：

#tabs
{
    clear: both;
    height: 28px;
    background-color: #000;
    border-bottom: 1px solid #fff;
}

或者您可以尝试将其添加到fb-comments课程中：

div.fb-comments {
    clear: both !important;
}

score 0 · Accepted Answer

由于您设置页面样式的方式，您已向选项卡容器添加了高度，但其中仍有内容，因此这会导致重叠错误，因为内容大于高度集。

为了快速修复，只需将 margin-bottom 添加到 #tabs 容器中，它将向下移动 facebook 评论：

#tabs {
    height: 28px;
    background-color: black;
    border-bottom: 1px solid white;
    margin-bottom: 100px;
}

编辑

再次查看您的代码后，您真正应该做的是将高度和背景颜色添加到列表而不是 div #tabs

像这样的东西

#tabs ul {
    height: 28px;
    background-color: black;
}

然后你的#tabs 应该是这样的

#tabs{
    height: 150px; //Whatever size the whole section should be
}

2 回答 2