javascript - 文章高度随其他文章调整

Question

我有以下 javascript 片段:

for(var i=1;i<4;i++) 
    { 
        var img= ".img"+i;
        $(img).on("click", function(){
            var art = $(this).closest('article');
            art.css('height', 'auto');
            art.find('p').slideToggle(200);
            if(this.src.indexOf("plus") > -1)
            {
                this.src = "images/min.png";
            }
            else
            {
                art.css('height', '62px');
                this.src = "images/plus.png";
            }
            return false;
        });
        $(img).wrap($('<a>',{href: '#'}));
    }

这调整了我的文章元素的高度，问题是文章相互干扰。我试图解决这个问题，但没有运气。我该如何解决这个问题？

你可以在我的网站上看到问题www.stijnaerts.be

例如，您点击“关于我”旁边的 +，高度会正确调整。现在点击“联系人”旁边的 +，这将调整联系人文章的高度以及“关于我”文章的高度。

我希望我把这个问题解释清楚了。

提前致谢。

Answer 1

您正在容器上使用 display: flex，因此默认情况下 flex 是这样工作的。添加“对齐元素: flex 启动；”到您的容器以获得正确的高度。

.homediv { align-items: flex-start; }

您还应该知道目前 flexbox 还没有得到广泛支持。这里有一篇好文章http://css-tricks.com/snippets/css/a-guide-to-flexbox/