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的工作方式。添加“align-items：flex-start;”到你的容器，以获得正确的高度。

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

此外，您知道此时并未广泛支持Flexbox。这是一篇好文章http://css-tricks.com/snippets/css/a-guide-to-flexbox/

文章的高度与其他文章一起调整

1 个答案: