как мне получить ваппер для расширения?

Question

Действительно ударившись головой об этом.

Я использую изотоп http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html.

У меня есть относительный набор #container, в нем у меня есть голова с верхней навигацией со скрытым subnav, если я нажимаю на ссылку в навигационной панели, он расширяет subnav.Хорошо.У меня есть обертка для ящиков, эти ящики установлены абсолютно изотопно.

Проблема в том, что при расширении subnav содержимое выталкивается вниз, а поля обрезаются.#container использует переполнение: скрыто, и я не могу сделать его видимым, иначе это создает другие проблемы.Я пробовал так много решений, просто не могу понять это.

Answer 1

В итоге я снял #head с #container и просто установил с помощью jQuery ширину #head и поля #head в качестве #container, даже при изменении размера окна, тем самым мне не нужно расширять #container, когда подпрограмма nav покажет, и он просто нажмет #container div как обычно.

 $(function() {
   var myLeft = $("#container").offset().left;
   var newWidth = $("#container").innerWidth();
   var myRight = $(window).width() - ($("#container").offset().left + $("#container").outerWidth());
$("#head").animate({ width: newWidth, marginLeft: myLeft, marginRight: myRight }, "fast");
});

Спасибо

Answer 2

Вы ссылаетесь не на ту оболочку для содержания изотопа.Вы должны ссылаться на контейнер для вашего контента, который вы хотите отсортировать, в данном случае .box-container (здесь var $container = $('.box-container');. Итак, сделайте это, а также удалите из своего CSS следующее, поскольку они не нужны:

#container {
    margin: 0 auto;  /* centering won't work without a solid width and not a restriction (min-width) */
    max-height: 100%; /* remove */
    min-height: 100%; /* remove */
    min-width: 930px;
    padding: 20px 5px 40px;
}

body {
    padding-bottom: 20px;
}