文章高度随其他文章调整答案

【问题标题】：Height of article adjusts with other articles文章高度随其他文章调整
【发布时间】：2014-06-05 21:53:33
【问题描述】：

我有以下 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看到问题

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

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

提前致谢。

【问题讨论】：

你能在 JSFiddle 中重新创建错误以便我们看到吗？
恕我直言，这种行为是完全可以接受的
jsfiddle.net/stijn26/XpuHy/7 可接受的意思是什么？我不想要这种行为：p
@stijn26 我不知道这更多的是关于设计偏好。我喜欢对称，在你的网站上效果有点酷：P
这完全与 CSS 样式有关。下次，请在小提琴或其他代码编辑器中重新构建您的问题...JS与此无关。

标签： javascript jquery css

【解决方案1】：

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

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

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

【讨论】：

谢谢！是的，我知道 flex 并没有得到广泛支持，但现在它就足够了，也许以后我会将它编辑为更广泛支持的东西。