Навигация с помощью вкладок Jquery вызывает плавающие проблемы с элементами ниже

Question

У меня была сильная головная боль, когда я пытался понять, почему окно комментариев на Facebook так высоко поднимается прямо под вкладками навигации с вкладками.Я пробовал несколько вариантов clearfix для плавающих элементов, но безрезультатно, я понял, что если вы удалите элементы jquery, то все будет работать нормально ... но у меня возникают проблемы с точным указанием ответа

Вот рабочая ссылка

http://smooth -media.co.uk / clients / 4598185 /

Большое спасибо заранее

Answer 1

Из-за того, как вы стилизовали страницу, вы добавили высоту в контейнер вкладок, но в ней все еще есть содержимое, так что это вызывает ошибку перекрытия, так как содержимое больше, чем набор высоты.

Для быстрого исправления просто добавьте margin-bottom в контейнер #tabs, и он переместит комментарии facebook вниз:

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

EDIT

После просмотра сновав вашем коде, что вам действительно нужно сделать, это добавить высоту и цвет фона в список, а не вкладки div #

примерно так

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

Тогда ваши #tabs должны выглядеть следующим образомэто

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

Answer 2

Я бы попытался добавить clear:all в #tabs div:

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

Или вы можете попробовать добавить его в fb-comments класс:

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