物品高度随其他物品调整

Height of article adjusts with other articles

本文关键字：调整 其他 高度      更新时间：2023-09-26

我有以下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

例如，点击"about me"旁边的+，高度调整正确。现在点击"联系人"旁边的+，这将调整联系人文章的高度，也将调整文章"关于我"的高度。

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

您正在容器上使用display: flex，因此这是flex的默认工作方式。为你的容器添加"align-items: flex-start;"以获得正确的高度。

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

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

相关文章：