Question

真的用这个来敲我的头。

我正在使用同位素http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html。

我有一个#container set relative，其中我有一个带有隐藏subnav的顶部导航头，如果我点击导航上的链接它会扩展subnav。精细。我有一个相对于盒子的包装器，这些盒子绝对是由同位素设置的。

问题是，当subnav扩展时，它会将内容向下推，但框会被切断。 #container使用溢出：隐藏，我无法使其可见，否则会产生其他问题。我尝试过这么多解决方案，只是想不出来。

Answer 1

您正在引用同位素内容的错误包装。您应该引用要对其进行排序的内容的容器，在这种情况下为.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;
}

Answer 2

我最终把#head从#container上取下来，只需将#head宽度和#head margin设置为#container，即使在窗口调整大小时，这样做我也不需要在sub时扩展#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");
});

由于

如何让wapper扩展？

2 个答案: